ogvjs_player_initialization_for_ogg_webm_browser_playback.ts

1import { OGVPlayer } from 'ogv';
2
3/**
4 * Basic initialization and playback using ogv.js in TypeScript.
5 * ogv.js provides a compatibility layer for Ogg and WebM video playback 
6 * in browsers that do not support them natively (like older Safari/iOS).
7 */
8async function initializeOGVPlayer(containerId: string, videoUrl: string): Promise<void> {
9    // Create the player instance
10    const player: OGVPlayer = new OGVPlayer();
11
12    // Set up the source URL
13    player.src = videoUrl;
14
15    // Append the player's canvas/video element to the DOM
16    const container = document.getElementById(containerId);
17    if (container) {
18        container.appendChild(player);
19    } else {
20        console.error('Container element not found');
21        return;
22    }
23
24    // Event listener for when the metadata is loaded
25    player.addEventListener('loadedmetadata', () => {
26        console.log(`Video dimensions: ${player.videoWidth}x${player.videoHeight}`);
27    });
28
29    // Start playback
30    try {
31        await player.play();
32        console.log('Playback started');
33    } catch (error) {
34        console.error('Playback failed:', error);
35    }
36}
37
38// Usage
39const videoSource = 'https://example.com/path/to/video.ogv';
40initializeOGVPlayer('video-container', videoSource);