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
|
import Hls from "hls.js";
import { h } from "@xeserv/xeact";
export interface VideoProps {
path: string;
}
export default function Video({ path }: VideoProps) {
const streamURL =
`https://cdn.xeiaso.net/file/christine-static/${path}/index.m3u8`;
const video: HTMLVideoElement =
h("video", {style: "width:100%", controls: true}, [
h("source", {src: streamURL, type: "application/vnd.apple.mpegurl"}, []),
h("source", {src: "https://cdn.xeiaso.net/file/christine-static/blog/HLSBROKE.mp4", type: "video/mp4"}, [])
]) as unknown as HTMLVideoElement;
if (Hls.isSupported()) {
const hls = new Hls();
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
console.log("video and hls.js are now bound together !");
});
hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
console.log(
"manifest loaded, found " + data.levels.length + " quality level",
);
});
hls.loadSource(streamURL);
hls.attachMedia(video);
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = streamURL;
}
return video;
}
|
