This repository has been archived by the owner on May 17, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
47 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,72 +1,52 @@ | ||
| // Web Components: Extending Native Elements, A working example | ||
|
|
||
| import { CustomVideoElement } from 'custom-media-element'; | ||
| import Hls from 'hls.js'; | ||
|
|
||
| class HLSVideoElement extends CustomVideoElement { | ||
| constructor() { | ||
| super(); | ||
| } | ||
|
|
||
| get src() { | ||
| // Use the attribute value as the source of truth. | ||
| // No need to store it in two places. | ||
| // This avoids needing a to read the attribute initially and update the src. | ||
| return this.getAttribute('src'); | ||
| attributeChangedCallback(attrName, oldValue, newValue) { | ||
| if (attrName !== 'src') { | ||
| super.attributeChangedCallback(attrName, oldValue, newValue); | ||
| } | ||
|
|
||
| if (attrName === 'src' && oldValue != newValue) { | ||
| this.load(); | ||
| } | ||
| } | ||
|
|
||
| set src(val) { | ||
| // If being set by attributeChangedCallback, | ||
| // dont' cause an infinite loop | ||
| if (val !== this.src) { | ||
| this.setAttribute('src', val); | ||
| #destroy() { | ||
| if (this.api) { | ||
| this.api.detachMedia(); | ||
| this.api.destroy(); | ||
| this.api = null; | ||
| } | ||
| } | ||
|
|
||
| load() { | ||
| this.#destroy(); | ||
|
|
||
| if (!this.src) { | ||
| return; | ||
| } | ||
|
|
||
| if (Hls.isSupported()) { | ||
| var hls = new Hls({ | ||
| // Kind of like preload metadata, but causes spinner. | ||
| // autoStartLoad: false, | ||
|
|
||
| // Mimic the media element with an Infinity duration | ||
| // for live streams | ||
| this.api = new Hls({ | ||
| // Mimic the media element with an Infinity duration for live streams. | ||
| liveDurationInfinity: true | ||
| }); | ||
|
|
||
| hls.loadSource(this.src); | ||
| hls.attachMedia(this.nativeEl); | ||
| this.api.loadSource(this.src); | ||
| this.api.attachMedia(this.nativeEl); | ||
|
|
||
| } else if (this.nativeEl.canPlayType('application/vnd.apple.mpegurl')) { | ||
|
|
||
| this.nativeEl.src = this.src; | ||
| } | ||
| } | ||
|
|
||
| // play() { | ||
| // if (this.readyState === 0 && this.networkState < 2) { | ||
| // this.load(); | ||
| // this.hls.on(Hls.Events.MANIFEST_PARSED,function() { | ||
| // video.play(); | ||
| // | ||
| // return this.nativeEl.play(); | ||
| // } | ||
| // } | ||
|
|
||
| connectedCallback() { | ||
| this.load(); | ||
|
|
||
| // Not preloading might require faking the play() promise | ||
| // so that you can call play(), call load() within that | ||
| // But wait until MANIFEST_PARSED to actually call play() | ||
| // on the nativeEl. | ||
| // if (this.preload === 'auto') { | ||
| // this.load(); | ||
| // } | ||
| } | ||
| } | ||
|
|
||
| if (!window.customElements.get('hls-video')) { | ||
| window.customElements.define('hls-video', HLSVideoElement); | ||
| window.HLSVideoElement = HLSVideoElement; | ||
| if (globalThis.customElements && !globalThis.customElements.get('hls-video')) { | ||
| globalThis.customElements.define('hls-video', HLSVideoElement); | ||
| } | ||
|
|
||
| export default HLSVideoElement; |