forked from muxinc/hls-video-element
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
72 lines (60 loc) · 1.84 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// Web Components: Extending Native Elements, A working example
import CustomVideoElement from 'custom-video-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');
}
set src(val) {
// If being set by attributeChangedCallback,
// dont' cause an infinite loop
if (val !== this.src) {
this.setAttribute('src', val);
}
}
load() {
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
liveDurationInfinity: true
});
hls.loadSource(this.src);
hls.attachMedia(this.nativeEl);
} else if (video.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;
}
export default HLSVideoElement;