### Install Vimeo Video Element via NPM Source: https://github.com/muxinc/media-elements/blob/main/packages/vimeo-video-element/README.md Install the vimeo-video-element package using npm. ```bash npm install vimeo-video-element ``` -------------------------------- ### Install PeerTube Video Element via NPM Source: https://github.com/muxinc/media-elements/blob/main/packages/peertube-video-element/README.md Install the package using npm. Then, import it into your JavaScript application. ```bash npm install peertube-video-element ``` ```javascript import 'peertube-video-element'; ``` -------------------------------- ### Install videojs-video-element via NPM Source: https://github.com/muxinc/media-elements/blob/main/packages/videojs-video-element/README.md Install the package using npm. This is the recommended way to include the library in your project. ```bash npm install videojs-video-element ``` -------------------------------- ### Install wistia-video-element via NPM Source: https://github.com/muxinc/media-elements/blob/main/packages/wistia-video-element/README.md Install the wistia-video-element package using npm for use in your project's JavaScript. ```bash npm install wistia-video-element ``` -------------------------------- ### Install `dash-video-element` via NPM Source: https://github.com/muxinc/media-elements/blob/main/packages/dash-video-element/README.md Install the package using npm. This is the recommended way to include the custom element in your project. ```bash npm install dash-video-element ``` -------------------------------- ### Install `hls-video-element` via NPM Source: https://github.com/muxinc/media-elements/blob/main/packages/hls-video-element/README.md Install the package using npm for use in your project's JavaScript. ```bash npm install hls-video-element ``` -------------------------------- ### Install Spotify Audio Element via NPM Source: https://github.com/muxinc/media-elements/blob/main/packages/spotify-audio-element/README.md Install the package using npm. This is the recommended way to include the element in your project for better dependency management. ```bash npm install spotify-audio-element ``` -------------------------------- ### Install Shaka Video Element via npm Source: https://github.com/muxinc/media-elements/blob/main/packages/shaka-video-element/README.md Install the package using npm. Then, import the element in your JavaScript application to register it. ```bash npm install shaka-video-element ``` ```javascript import 'shaka-video-element'; ``` -------------------------------- ### Install Twitch Video Element via NPM Source: https://github.com/muxinc/media-elements/blob/main/packages/twitch-video-element/README.md Install the package using npm. This is the recommended way to include the element in your project. ```bash npm install twitch-video-element ``` -------------------------------- ### Install YouTube Video Element via npm Source: https://github.com/muxinc/media-elements/blob/main/packages/youtube-video-element/README.md Install the package using npm or yarn. Then, import it into your JavaScript application to register the custom element. ```bash npm install youtube-video-element --save ``` ```bash yarn add youtube-video-element ``` -------------------------------- ### Install Cloudflare Video Element via NPM Source: https://github.com/muxinc/media-elements/blob/main/packages/cloudflare-video-element/README.md Install the package using npm. Then, import the element in your JavaScript application to register it. ```bash npm install cloudflare-video-element ``` ```js import 'cloudflare-video-element'; ``` -------------------------------- ### Run Development Server in Next.js Source: https://github.com/muxinc/media-elements/blob/main/examples/nextjs/README.md Use these commands to start the Next.js development server. The application will be available at http://localhost:3000. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Install TikTok Video Element via npm Source: https://github.com/muxinc/media-elements/blob/main/packages/tiktok-video-element/README.md Install the package using npm or yarn. Then, import it into your application's JavaScript to register the custom element. ```bash npm install tiktok-video-element --save ``` ```bash yarn add tiktok-video-element ``` ```javascript import 'tiktok-video-element'; ``` -------------------------------- ### Install JW Player Video Element via NPM Source: https://github.com/muxinc/media-elements/blob/main/packages/jwplayer-video-element/README.md Install the jwplayer-video-element package using npm. This is the recommended way to include the element in your project. ```bash npm install jwplayer-video-element ``` -------------------------------- ### Basic Video.js Element Setup Source: https://github.com/muxinc/media-elements/blob/main/packages/videojs-video-element/index.html Defines the basic structure and styling for the videojs-video element. This is typically used in the HTML to set up the video player container. ```html body { text-align: center; } media-controller, videojs-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; } nav { display: flex; justify-content: space-between; } ``` -------------------------------- ### Media Chrome Integration for Playback Source: https://github.com/muxinc/media-elements/blob/main/packages/videojs-video-element/index.html Shows how to load a new clip into a video element integrated with Media Chrome. This example also includes event listeners for 'resize' events. ```javascript loadbtn2.onclick = () => { [...video.children].forEach(c => c.remove()); video2.src = 'https://stream.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k.m3u8'; video2.poster = ""; } video2.addEventListener('resize', (e) => { console.log(e.type, video2.videoWidth, video2.videoHeight); }); ``` -------------------------------- ### Load New Wistia Video Clip on Button Click Source: https://github.com/muxinc/media-elements/blob/main/packages/wistia-video-element/index.html Dynamically load a new Wistia video clip when a button is clicked. This example assumes a button element with the ID `loadbtn` exists. ```javascript let video = document.querySelector('wistia-video'); loadbtn.onclick = () => { video.src = 'https://wesleyluyten.wistia.com/medias/1ekn652fs5'; } ``` -------------------------------- ### Integrate PeerTube Video Element with Media Chrome Source: https://github.com/muxinc/media-elements/blob/main/packages/peertube-video-element/README.md This example shows how to use the `` element within a Media Chrome controller, including import maps for dependencies and various media control components. ```html ``` -------------------------------- ### Import Twitch Video Element in JavaScript Source: https://github.com/muxinc/media-elements/blob/main/packages/twitch-video-element/README.md After installing via npm, import the element in your JavaScript file to register it with the browser. ```javascript import 'twitch-video-element'; ``` -------------------------------- ### Import `dash-video-element` in JavaScript Source: https://github.com/muxinc/media-elements/blob/main/packages/dash-video-element/README.md After installing via npm, import the element into your JavaScript application. This registers the custom element with the browser. ```javascript import 'dash-video-element'; ``` -------------------------------- ### Import Spotify Audio Element in JavaScript Source: https://github.com/muxinc/media-elements/blob/main/packages/spotify-audio-element/README.md After installing via npm, import the element in your JavaScript entry file to register it with the browser. This makes the `` tag available for use in your HTML. ```javascript import 'spotify-audio-element'; ``` -------------------------------- ### Load `dash-video-element` from CDN Source: https://github.com/muxinc/media-elements/blob/main/packages/dash-video-element/README.md Alternatively, load the custom element script directly from a CDN using a script tag in your HTML. This is useful for quick testing or simple setups. ```html ``` -------------------------------- ### Import JW Player Video Element in JavaScript Source: https://github.com/muxinc/media-elements/blob/main/packages/jwplayer-video-element/README.md After installing via npm, import the package in your JavaScript file to register the custom element with the browser. ```javascript import 'jwplayer-video-element'; ``` -------------------------------- ### Basic Usage of `` Source: https://github.com/muxinc/media-elements/blob/main/packages/hls-video-element/README.md Include the script from a CDN and use the `` tag with the 'src' attribute pointing to your HLS manifest. ```html ``` -------------------------------- ### Initialize Media Element and Load HLS Source Source: https://github.com/muxinc/media-elements/blob/main/packages/media-tracks/index.html Polyfills the native HTMLMediaElement API and loads an HLS video source. Requires HLS.js to be supported. ```javascript // Importing this module polyfills the native HTMLMediaElement API. import './dist/polyfill.js'; import 'https://cdn.jsdelivr.net/npm/hls.js@1'; const myVideo = document.querySelector('video'); console.log(myVideo.videoTracks); console.log(myVideo.audioTracks); let videoSrc = 'https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8'; // Polyfilled media API's // // Add renditions to select element // // Listen for resize events // // Enable / disable renditions from select myVideo.videoRenditions.addEventListener('addrendition', ({ rendition }) => { qualityselect.append(new Option( `${Math.min(rendition.width, rendition.height)}p`, rendition.id, )); }); myVideo.addEventListener('resize', () => { qualityselected.textContent = `${Math.min(myVideo.videoWidth, myVideo.videoHeight)}p`; }); qualityselect.addEventListener('change', () => { myVideo.videoRenditions.selectedIndex = qualityselect.selectedIndex - 1; }); // Audio tracks // Add audio tracks to select menu // Enable / disable audio tracks from select myVideo.audioTracks.addEventListener('removetrack', ({ track }) => { audioselect.querySelector(`[value="${track.id}"`)?.remove(); }); myVideo.audioTracks.addEventListener('addtrack', ({ track }) => { audioselect.append(new Option( track.label, track.id, track.enabled, track.enabled )); }); audioselect.addEventListener('change', () => { for (let track of myVideo.audioTracks) { track.enabled = audioselect.value == track.id; } }); // After this line will be all handled internally in the media engine. if (myVideo.canPlayType('application/vnd.apple.mpegurl')) { myVideo.src = videoSrc; } else if (Hls.isSupported()) { var hls = new Hls(); hls.loadSource(videoSrc); hls.attachMedia(myVideo); // We will handle this in custom-media-element, hls-video, mux-video, etc. hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) { const videoTrack = myVideo.addVideoTrack('main'); videoTrack.selected = true; for (let [id, level] of data.levels.entries()) { const videoRendition = videoTrack.addRendition( level.url[0], level.width, level.height, level.videoCodec, level.bitrate, ); videoRendition.id = id; } for (let [id, a] of data.audioTracks.entries()) { const kind = a.default ? 'main' : 'alternative'; const audioTrack = myVideo.addAudioTrack(kind, a.name, a.lang); audioTrack.id = id; if (a.default) { audioTrack.enabled = true; } } }); // hls.js doesn't support enabling multiple renditions easily // for demo purposes if all renditions are selected it's auto selection // if 1 of the renditions is deselected we assume a selection was made // and lock it to the first rendition that is selected. myVideo.videoRenditions.addEventListener('change', (event) => { console.log(event); let level = myVideo.videoRenditions.selectedIndex; if (level != hls.currentLevel) { console.log(`Changing level to ${level}`); hls.nextLevel = level; } }); myVideo.audioTracks.addEventListener('change', () => { hls.audioTrack = [...myVideo.audioTracks].find(t => t.enabled).id; }); // end of internal media tracks / renditions implementation } myVideo.addEventListener('emptied', (e) => { console.log(e.type, performance.now()); }); myVideo.addEventListener('loadstart', (e) => { console.log(e.type, performance.now()); }); myVideo.addEventListener('loadedmetadata', (e) => { console.log(e.type, performance.now()); }); myVideo.addEventListener('loadeddata', (e) => { console.log(e.type, performance.now()); }); myVideo.addEventListener('resize', (e) => { console.log(e.type, performance.now()); }); myVideo.addEventListener('canplay', (e) => { console.log(e.type, performance.now()); }); myVideo.videoTracks.addEventListener('change', (e) => { console.log(e.type, performance.now()); }); myVideo.videoTracks.addEventListener('addtrack', (e) => { console.log(e.type, performance.now()); console.log(e.track) }); myVideo.videoTracks.addEventListener('removetrack', (e) => { console.log(e.type, performance.now()); console.log(e.track) }); myVideo.audioTracks.addEventListener('addtrack', (e) => { console.log(e.type, performance.now()); console.log(e.track) }); myVideo.addEventListener('play', function(event) { console.log(event.type); }); // setTimeout(() => { // myVideo.removeAttribute('src'); // myVideo.load(); // }, 5000); ``` -------------------------------- ### Configuring PeerTube Player Options Source: https://github.com/muxinc/media-elements/blob/main/packages/peertube-video-element/README.md The `config` prop accepts an object where keys correspond to PeerTube embed URL parameters. This allows for fine-grained control over player features such as P2P, playback mode, subtitles, and more. ```APIDOC ## `config` prop Pass PeerTube embed URL parameters via the `config` property to customize player behavior: ```js const player = document.querySelector('peertube-video'); player.config = { p2p: 0, // disable P2P mode: 'web-video', // 'web-video' (MP4) or 'p2p-media-loader' (HLS/ABR) subtitle: 'en', // auto-select caption language on load playbackRate: 1.5, // initial playback speed }; ``` | Option | Type | Description | | ------ | ---- | ----------- | | `p2p` | `0 | 1` | Enable/disable P2P (default: `1`) | | `mode` | `'web-video' | 'p2p-media-loader'` | Player engine. Use `p2p-media-loader` for HLS and adaptive bitrate | | `subtitle` | `string` | ISO language code to auto-select on load (e.g. `'en'`, `'fr'`) | | `playbackRate` | `number` | Initial playback speed (e.g. `0.75`, `1.5`) | | `playlistPosition` | `number` | Starting position in a playlist (1-based) | | `waitPasswordFromEmbedAPI` | `0 | 1` | Delay load until password is supplied via `api.setVideoPassword()` | | `peertubeLink` | `0 | 1` | Show/hide the PeerTube instance link | | `title` | `0 | 1` | Show/hide the video title overlay | | `warningTitle` | `0 | 1` | Show/hide the P2P warning | | `controlBar` | `0 | 1` | Show/hide the native control bar during playback | | `start` | `number` | Start time in seconds | | `stop` | `number` | Stop time in seconds | | `bigPlayBackgroundColor` | `string` | Play button background color | | `foregroundColor` | `string` | Text/icon foreground color | ``` -------------------------------- ### Configure PeerTube Player Options Source: https://github.com/muxinc/media-elements/blob/main/packages/peertube-video-element/README.md Set player configuration options like P2P, mode, subtitle language, and playback rate by assigning an object to the 'config' property. ```javascript const player = document.querySelector('peertube-video'); player.config = { p2p: 0, // disable P2P mode: 'web-video', // 'web-video' (MP4) or 'p2p-media-loader' (HLS/ABR) subtitle: 'en', // auto-select caption language on load playbackRate: 1.5, // initial playback speed }; ``` -------------------------------- ### Custom Media Element with Aspect Ratio Source: https://github.com/muxinc/media-elements/blob/main/packages/custom-media-element/examples/aspect-ratio.html Use the `aspect-ratio` CSS property on the `media-controller` element to maintain a specific aspect ratio. This example shows it applied directly to the custom element. ```css media-controller { max-width: 600px; aspect-ratio: 16 / 9; display: block; /* Test in a non block container. */ /* display: inline-block; */ /* Test with a fixed height to see overflow compared to native video. */ /* height: 300px; */ } ``` -------------------------------- ### Basic PeerTube Video Element Usage Source: https://github.com/muxinc/media-elements/blob/main/packages/peertube-video-element/README.md Include this script to load the element and use the `` tag with a PeerTube video source. ```html ``` -------------------------------- ### Basic Usage of `` Source: https://github.com/muxinc/media-elements/blob/main/packages/wistia-video-element/README.md Include the script from a CDN and use the wistia-video element with a src attribute pointing to your Wistia media. This registers the custom element for use in HTML. ```html ``` -------------------------------- ### Watch Remote Device Availability Source: https://github.com/muxinc/media-elements/blob/main/packages/castable-video/index.html Checks if the remote casting feature is disconnected and then watches for availability. Hides the cast button if no devices are available. Handles potential errors during the watch process and logs when watching starts. ```javascript if (castable.remote.state === 'disconnected') { castable.remote.watchAvailability((available) => { castBtn.hidden = !available; }) .catch((error) => { console.error(`> Error watching remote device availability: ${error}`); }) .then((id) => { console.log(`> Started watching remote device availability: ${id}`); }); } ``` -------------------------------- ### Import and Use youtube-video-element Source: https://github.com/muxinc/media-elements/blob/main/packages/youtube-video-element/index.html Import the custom element and use it in HTML. Basic CSS is provided for styling. ```html ``` -------------------------------- ### Apply MediaTracksMixin to a Custom Video Element Source: https://context7.com/muxinc/media-elements/llms.txt This snippet demonstrates how to apply the MediaTracksMixin to a custom media element class, enabling track and rendition management. It includes setup for HLS playback and event handling for track changes. ```js import { MediaTracksMixin } from 'media-tracks'; import { CustomVideoElement } from 'custom-media-element'; const TrackedVideoElement = MediaTracksMixin(CustomVideoElement); class HlsTrackedVideo extends TrackedVideoElement { async load() { const Hls = (await import('hls.js')).default; if (!Hls.isSupported()) return; const hls = new Hls(); hls.loadSource(this.src); hls.attachMedia(this.nativeEl); hls.on(Hls.Events.MANIFEST_PARSED, (_evt, data) => { for (const t of [...this.videoTracks]) this.removeVideoTrack(t); const track = this.addVideoTrack('main', 'Main', 'en'); track.selected = true; for (const level of data.levels) { track.addRendition( level.url[0], level.width, level.height, level.videoCodec, level.bitrate, level.frameRate ); } }); } } customElements.define('hls-tracked-video', HlsTrackedVideo); ``` ```js const player = document.querySelector('hls-tracked-video'); player.addEventListener('loadedmetadata', () => { console.log('Video tracks:', player.videoTracks.length); console.log('Renditions:', player.videoRenditions.length); player.videoRenditions.selectedIndex = player.videoRenditions.length - 1; player.videoRenditions.addEventListener('change', () => { const r = player.videoRenditions[player.videoRenditions.selectedIndex]; console.log(`Now playing at ${r.width}x${r.height} @ ${r.bitrate} bps`); }); }); player.audioTracks[0].enabled = false; player.audioTracks[1].enabled = true; player.audioTracks.addEventListener('change', () => { const enabled = [...player.audioTracks].find(t => t.enabled); console.log('Active audio track:', enabled?.label, enabled?.language); }); ``` -------------------------------- ### Basic Usage of `` Element Source: https://github.com/muxinc/media-elements/blob/main/packages/dash-video-element/README.md Include the custom element script and use the `` tag with a source URL pointing to a DASH manifest. This registers the element and makes it available for use in HTML. ```html ``` -------------------------------- ### Import and Event Listeners for HLS Video Element Source: https://github.com/muxinc/media-elements/blob/main/packages/hls-video-element/index.html Import the hls-video-element and set up event listeners for audio and video tracks, renditions, and player events. This snippet demonstrates how to manage audio track selection, quality selection based on rendition, and logging various player states. ```javascript import './hls-video-element.js'; myVideo.audioTracks.addEventListener('removetrack', ({ track }) => { audioselect.querySelector( `[value="${track.id}"]` ).remove(); }); myVideo.audioTracks.addEventListener('addtrack', ({ track }) => { audioselect.append( new Option( track.label, track.id, track.enabled, track.enabled ) ); }); audioselect.addEventListener('change', () => { for (let track of myVideo.audioTracks) { track.enabled = audioselect.value == track.id; } }); myVideo.videoTracks.addEventListener('removetrack', ({ track }) => { let i = qualityselect.options.length; while (--i) qualityselect.options.remove(i); }); myVideo.videoRenditions.addEventListener('addrendition', ({ rendition }) => { qualityselect.append( new Option( `${Math.min(rendition.width, rendition.height)}p`, rendition.id, ) ); }); myVideo.videoRenditions.addEventListener('removerendition', ({ rendition }) => { qualityselect.querySelector(`[value="${rendition.id}"]`).remove(); }); myVideo.addEventListener('resize', () => { qualityselected.value = `${Math.min(myVideo.videoWidth, myVideo.videoHeight)}p`; }); loadbtn.onclick = () => { myVideo.config = { debug: true, }; myVideo.src = 'https://stream.mux.com/1EFcsL5JET00t00mBv01t00xt00T4QeNQtsXx2cKY6DLd7RM.m3u8'; }; removebtn.onclick = () => { myVideo.api.removeLevel(0); }; qualityselect.addEventListener('change', () => { myVideo.videoRenditions.selectedIndex = qualityselect.selectedIndex - 1; }); ``` -------------------------------- ### Initialize JW Player Video Element Source: https://github.com/muxinc/media-elements/blob/main/packages/jwplayer-video-element/index.html Select the jwplayer-video element and set its source attribute to load a video clip. ```javascript let video = document.querySelector('jwplayer-video'); video.src = "https://cdn.jwplayer.com/players/C8YE48zj-IxzuqJ4M.html"; ``` -------------------------------- ### Load New Clip with youtube-video-element Source: https://github.com/muxinc/media-elements/blob/main/packages/youtube-video-element/index.html Demonstrates how to programmatically load a new YouTube clip and set playback configuration. This is useful for dynamic content loading. ```javascript const video = document.querySelector('#yt1'); loadbtn.onclick = () => { video.config = { start: 10, }; video.src = 'https://www.youtube.com/watch?v=uxsOYVWclA0'; }; ``` -------------------------------- ### Load Spotify Audio Element from CDN Source: https://github.com/muxinc/media-elements/blob/main/packages/spotify-audio-element/README.md Alternatively, you can load the element directly from a CDN using a script tag. This is useful for quick testing or in environments where npm is not used. ```html ``` -------------------------------- ### Import Vimeo Video Element Source: https://github.com/muxinc/media-elements/blob/main/packages/vimeo-video-element/index.html Import the Vimeo Video Element to use it in your project. Ensure the correct path is provided. ```javascript import 'vimeo-video-element'; ``` -------------------------------- ### Configure Live Stream with Shaka Video Element Source: https://github.com/muxinc/media-elements/blob/main/packages/shaka-video-element/index.html Shows how to configure the Shaka Video Element for live streaming with low latency mode enabled. It also includes numerous event listeners to log various playback states and media events. ```javascript import './dist/shaka-video-element.js'; const video = document.querySelector('#live-video'); video.api.configure({ streaming: { lowLatencyMode: true, } }); video.src = 'https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8'; video.addEventListener('emptied', (e) => { console.log(e.type); }); video.addEventListener('loadstart', (e) => { console.log(e.type); }); video.addEventListener('loadedmetadata', (e) => { console.log(e.type); }); video.addEventListener('loadeddata', (e) => { console.log(e.type); }); video.addEventListener('play', (e) => { console.log(e.type); }); video.addEventListener('waiting', (e) => { console.log(e.type); }); video.addEventListener('playing', (e) => { console.log(e.type); }); video.addEventListener('pause', (e) => { console.log(e.type); }); video.addEventListener('seeking', (e) => { console.log(e.type); }); video.addEventListener('seeked', (e) => { console.log(e.type); }); video.addEventListener('ended', (e) => { console.log(e.type); }); video.addEventListener('durationchange', (e) => { console.log(e.type, video.duration); }); video.addEventListener('volumechange', (e) => { console.log(e.type, video.volume); }); video.addEventListener('resize', (e) => { console.log(e.type, video.videoWidth, video.videoHeight); }); ``` -------------------------------- ### Load On-Demand Clip with Shaka Video Element Source: https://github.com/muxinc/media-elements/blob/main/packages/shaka-video-element/index.html Demonstrates how to load an on-demand video clip into the Shaka Video Element. This includes setting the poster image and the video source. It also includes an event listener for the 'resize' event to update a quality indicator. ```javascript import './dist/shaka-video-element.js'; myVideo.addEventListener('resize', () => { qualityselected.value = `${Math.min(myVideo.videoWidth, myVideo.videoHeight)}p`; }); loadbtn.onclick = () => { myVideo.poster = 'https://image.mux.com/1EFcsL5JET00t00mBv01t00xt00T4QeNQtsXx2cKY6DLd7RM/thumbnail.jpg?time=1'; myVideo.src = 'https://stream.mux.com/1EFcsL5JET00t00mBv01t00xt00T4QeNQtsXx2cKY6DLd7RM.m3u8'; }; ``` -------------------------------- ### Use a Custom Video Element in HTML Source: https://github.com/muxinc/media-elements/blob/main/packages/custom-media-element/README.md Instantiate the custom video element in your HTML markup, providing the source URL via the 'src' attribute. ```html ``` -------------------------------- ### Basic Usage of Vimeo Video Element Source: https://github.com/muxinc/media-elements/blob/main/packages/vimeo-video-element/README.md Include the script from a CDN and use the vimeo-video element with a src attribute pointing to a Vimeo video. ```html ``` -------------------------------- ### Load New Clip with Cloudflare Video Element Source: https://github.com/muxinc/media-elements/blob/main/packages/cloudflare-video-element/index.html Demonstrates how to select a cloudflare-video element and dynamically load a new clip using its `src` property. This is useful for updating the video content on the fly. ```javascript const video = document.querySelector('cloudflare-video'); loadbtn.onclick = () => { video.src = 'https://watch.videodelivery.net/8c796b1cee7ab418f77718477c566420'; } ``` -------------------------------- ### Loading New Clips and Event Handling Source: https://github.com/muxinc/media-elements/blob/main/packages/videojs-video-element/index.html Demonstrates how to dynamically load a new video clip into the videojs-video element and listen for various media playback events. This is useful for creating custom playback controls or tracking player states. ```javascript video = document.querySelector('videojs-video'); loadbtn.onclick = () => { [...video.children].forEach(c => c.remove()); video.src = 'https://stream.mux.com/ERDtGClvKFcaBm01psUirD1tGcV4NeTqEtRNf1Zy87800/low.mp4'; video.poster = ""; } video.addEventListener('emptied', (e) => { console.log(e.type); }); video.addEventListener('loadstart', (e) => { console.log(e.type); }); video.addEventListener('loadedmetadata', (e) => { console.log(e.type); }); video.addEventListener('loadeddata', (e) => { console.log(e.type); }); video.addEventListener('play', (e) => { console.log(e.type); }); video.addEventListener('waiting', (e) => { console.log(e.type); }); video.addEventListener('playing', (e) => { console.log(e.type); }); video.addEventListener('pause', (e) => { console.log(e.type); }); video.addEventListener('seeking', (e) => { console.log(e.type); }); video.addEventListener('seeked', (e) => { console.log(e.type); }); video.addEventListener('ended', (e) => { console.log(e.type); }); video.addEventListener('durationchange', (e) => { console.log(e.type, video.duration); }); video.addEventListener('volumechange', (e) => { console.log(e.type, video.volume); }); video.addEventListener('resize', (e) => { console.log(e.type, video.videoWidth, video.videoHeight); }); ``` -------------------------------- ### Use YouTube Video Element in HTML Source: https://github.com/muxinc/media-elements/blob/main/packages/youtube-video-element/README.md Include the script tag to load the element and then use the `` tag with the `src` attribute pointing to a YouTube video. ```html ``` -------------------------------- ### Basic Usage of videojs-video-element Source: https://github.com/muxinc/media-elements/blob/main/packages/videojs-video-element/README.md Include the script from a CDN and use the `` tag like a standard HTML5 video element. This registers the custom element with the browser. ```html ``` -------------------------------- ### Audio Track Management with Media Chrome Source: https://github.com/muxinc/media-elements/blob/main/packages/videojs-video-element/index.html Demonstrates how to manage audio tracks for a video element using Media Chrome. It includes event listeners for adding and removing audio tracks, and updating the selected track based on user interaction. ```javascript video2.audioTracks.addEventListener('removetrack', ({ track }) => { audioselect.querySelector(`[value="${track.id}"]`)?.remove(); }); video2.audioTracks.addEventListener('addtrack', ({ track }) => { audioselect.append(new Option( track.label, track.id, track.enabled, track.enabled )); }); audioselect.addEventListener('change', () => { for (let track of video2.audioTracks) { track.enabled = audioselect.value == track.id; } }); ``` -------------------------------- ### Import wistia-video-element in JavaScript Source: https://github.com/muxinc/media-elements/blob/main/packages/wistia-video-element/README.md Import the wistia-video-element package into your JavaScript application to register the custom element. ```javascript import 'wistia-video-element'; ``` -------------------------------- ### Usage with MSE Source: https://github.com/muxinc/media-elements/blob/main/packages/castable-video/README.md Guidance on using `castable-video` with Media Source Extensions (MSE) like Hls.js or Dash.js, particularly regarding the `cast-src` attribute. ```APIDOC ## Using CastableVideoElement with MSE ### Description When using Media Source Extensions (MSE) with sources like `blob://...`, the `castable-video` element cannot automatically determine the actual video source URL. In such cases, you must explicitly provide the original video source URL using the `cast-src` attribute. ### Example with Hls.js ```html ``` ### Explanation By setting `cast-src` to the actual URL of the HLS or DASH manifest (e.g., `https://your-cdn.com/path/to/your/video.m3u8`), you provide the casting receiver with the correct information to stream the content, even though the `src` attribute points to a blob URL generated by the MSE player. ``` -------------------------------- ### Include Cloudflare Video Element via CDN Source: https://github.com/muxinc/media-elements/blob/main/packages/cloudflare-video-element/README.md Include this script to register the custom element with the browser, enabling its use in HTML. ```html ``` -------------------------------- ### Import videojs-video-element in JavaScript Source: https://github.com/muxinc/media-elements/blob/main/packages/videojs-video-element/README.md Import the package in your application's JavaScript file to register the custom element. This makes the `` tag available for use. ```javascript import 'videojs-video-element'; ``` -------------------------------- ### Load PeerTube Video Element from CDN Source: https://github.com/muxinc/media-elements/blob/main/packages/peertube-video-element/README.md Load the custom element directly from a CDN using JSDelivr. This registers the element for use in HTML. ```html ``` -------------------------------- ### Low-Level Mixin Usage with Custom Built-in Source: https://context7.com/muxinc/media-elements/llms.txt Utilize `CustomMediaMixin` to wrap a third-party custom built-in element, proxying native media element properties and methods. ```javascript import { CustomMediaMixin } from 'custom-media-element'; class CastableBase extends HTMLElement {} const CastableVideo = CustomMediaMixin(CastableBase, { tag: 'video', is: 'castable-video' }); ``` -------------------------------- ### Load wistia-video-element from CDN Source: https://github.com/muxinc/media-elements/blob/main/packages/wistia-video-element/README.md Load the wistia-video-element script directly from a CDN using JSDelivr. This makes the custom element available for use in your HTML. ```html ``` -------------------------------- ### AudioRenditionList Interface Source: https://github.com/muxinc/media-elements/blob/main/packages/media-tracks/README.md Manages a list of audio renditions for an audio track, including methods for adding, removing, and selecting renditions. ```typescript declare class AudioRenditionList extends EventTarget { [index: number]: AudioRendition; [Symbol.iterator](): IterableIterator; get length(): number; getRenditionById(id: string): AudioRendition | null; get selectedIndex(): number; set selectedIndex(index: number); get onaddrendition(): ((event?: { rendition: VideoRendition }) => void) | undefined; set onaddrendition(callback: ((event?: { rendition: VideoRendition }) => void) | undefined); get onremoverendition(): ((event?: { rendition: VideoRendition }) => void) | undefined; set onremoverendition(callback: ((event?: { rendition: VideoRendition }) => void) | undefined); get onchange(): (() => void) | undefined; set onchange(callback: (() => void) | undefined); } ``` -------------------------------- ### Define and Register a Custom Video Element Source: https://github.com/muxinc/media-elements/blob/main/packages/custom-media-element/README.md Extend the CustomVideoElement class to create a custom video element. Ensure it's defined only once to avoid errors. ```javascript import { CustomVideoElement } from 'custom-media-element'; class MyCustomVideoElement extends CustomVideoElement { constructor() { super(); } // Override the play method. play() { return super.play() } // Override the src getter & setter. get src() { return super.src; } set src(src) { super.src = src; } } if (globalThis.customElements && !globalThis.customElements.get('my-custom-video')) { globalThis.customElements.define('my-custom-video', MyCustomVideoElement); } export default MyCustomVideoElement; ``` -------------------------------- ### Load YouTube Video Element in HTML Head Source: https://github.com/muxinc/media-elements/blob/main/packages/youtube-video-element/README.md Load the custom element script in the `` of your HTML document using `type="module"` for quick registration. ```html ``` -------------------------------- ### Load `hls-video-element` from CDN Source: https://github.com/muxinc/media-elements/blob/main/packages/hls-video-element/README.md Load the custom element script directly from a CDN using a script tag with type="module". ```html ``` -------------------------------- ### Load Cloudflare Video Element via CDN Source: https://github.com/muxinc/media-elements/blob/main/packages/cloudflare-video-element/README.md Optionally, load the script directly from a CDN using jsDelivr to register the custom element. ```html ``` -------------------------------- ### VideoRenditionList Source: https://github.com/muxinc/media-elements/blob/main/packages/media-tracks/README.md Manages a list of video renditions for a video track. ```APIDOC ## VideoRenditionList ### Description Manages a collection of `VideoRendition` objects for a specific video track. It allows access to renditions by index or ID and provides events for rendition changes. ### Properties - **length**: `number` - The number of video renditions in the list. - **selectedIndex**: `number` - The index of the currently selected video rendition. - **onaddrendition**: `((event?: { rendition: VideoRendition }) => void) | undefined` - Callback for when a video rendition is added. - **onremoverendition**: `((event?: { rendition: VideoRendition }) => void) | undefined` - Callback for when a video rendition is removed. - **onchange**: `(() => void) | undefined` - Callback for when the selected video rendition changes. ### Methods - **[index: number]: VideoRendition** - Access a video rendition by its numerical index. - **[Symbol.iterator](): IterableIterator** - Allows iteration over the video renditions. - **getRenditionById(id: string): VideoRendition | null** - Retrieves a video rendition by its unique ID. ``` -------------------------------- ### Configure and Load Vimeo Clip Source: https://github.com/muxinc/media-elements/blob/main/packages/vimeo-video-element/index.html Configure the Vimeo Video Element with custom options and load a new clip by setting the 'src' property. Event listeners are added to track playback states. ```javascript const video = document.querySelector('vimeo-video'); video.config = { color: '00fa9a', }; loadbtn.onclick = () => { video.src = 'https://vimeo.com/638371504'; } video.addEventListener('loadstart', (e) => { console.log(e.type); }); video.addEventListener('play', (e) => { console.log(e.type); }); video.addEventListener('waiting', (e) => { console.log(e.type); }); video.addEventListener('playing', (e) => { console.log(e.type); }); video.addEventListener('pause', (e) => { console.log(e.type); }); video.addEventListener('seeking', (e) => { console.log(e.type); }); video.addEventListener('seeked', (e) => { console.log(e.type); }); video.addEventListener('ended', (e) => { console.log(e.type); }); video.addEventListener('durationchange', (e) => { console.log(e.type, video.duration); }); video.addEventListener('volumechange', (e) => { console.log(e.type, video.volume); }); video.addEventListener('resize', (e) => { console.log(e.type, video.videoWidth, video.videoHeight); }); ``` -------------------------------- ### Load Wistia Video Source Source: https://github.com/muxinc/media-elements/blob/main/packages/wistia-video-element/index.html Set the `src` attribute of the `wistia-video` element to load a new video clip. ```javascript let video = document.querySelector('wistia-video'); video.src = "https://wesleyluyten.wistia.com/medias/oifkgmxnkb"; ``` -------------------------------- ### VideoRenditionList Interface Source: https://github.com/muxinc/media-elements/blob/main/packages/media-tracks/README.md Manages a list of video renditions for a video track, including methods for adding, removing, and selecting renditions. ```typescript declare class VideoRenditionList extends EventTarget { [index: number]: VideoRendition; [Symbol.iterator](): IterableIterator; get length(): number; getRenditionById(id: string): VideoRendition | null; get selectedIndex(): number; set selectedIndex(index: number); get onaddrendition(): ((event?: { rendition: VideoRendition }) => void) | undefined; set onaddrendition(callback: ((event?: { rendition: VideoRendition }) => void) | undefined); get onremoverendition(): ((event?: { rendition: VideoRendition }) => void) | undefined; set onremoverendition(callback: ((event?: { rendition: VideoRendition }) => void) | undefined); get onchange(): (() => void) | undefined; set onchange(callback: (() => void) | undefined); } ``` -------------------------------- ### AudioRenditionList Source: https://github.com/muxinc/media-elements/blob/main/packages/media-tracks/README.md Manages a list of audio renditions for an audio track. ```APIDOC ## AudioRenditionList ### Description Manages a collection of `AudioRendition` objects for a specific audio track. It allows access to renditions by index or ID and provides events for rendition changes. ### Properties - **length**: `number` - The number of audio renditions in the list. - **selectedIndex**: `number` - The index of the currently selected audio rendition. - **onaddrendition**: `((event?: { rendition: VideoRendition }) => void) | undefined` - Callback for when an audio rendition is added. - **onremoverendition**: `((event?: { rendition: VideoRendition }) => void) | undefined` - Callback for when an audio rendition is removed. - **onchange**: `(() => void) | undefined` - Callback for when the selected audio rendition changes. ### Methods - **[index: number]: AudioRendition** - Access an audio rendition by its numerical index. - **[Symbol.iterator](): IterableIterator** - Allows iteration over the audio renditions. - **getRenditionById(id: string): AudioRendition | null** - Retrieves an audio rendition by its unique ID. ``` -------------------------------- ### HTMLMediaElement Interface Extensions Source: https://github.com/muxinc/media-elements/blob/main/packages/media-tracks/README.md Extends the global HTMLMediaElement interface to include properties and methods for managing video and audio tracks and renditions. ```typescript declare global { interface HTMLMediaElement { videoTracks: VideoTrackList; audioTracks: AudioTrackList; addVideoTrack(kind: string, label?: string, language?: string): VideoTrack; addAudioTrack(kind: string, label?: string, language?: string): AudioTrack; removeVideoTrack(track: VideoTrack): void; removeAudioTrack(track: AudioTrack): void; videoRenditions: VideoRenditionList; audioRenditions: AudioRenditionList; } } ```