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
73
|
import { useEffect, useRef } from "react";
import Artplayer from "artplayer";
import Hls from "hls.js";
export default function Player({
option,
res,
quality,
getInstance,
...rest
}) {
const artRef = useRef();
function playM3u8(video, url, art) {
if (Hls.isSupported()) {
if (art.hls) art.hls.destroy();
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
art.hls = hls;
art.on("destroy", () => hls.destroy());
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = url;
} else {
art.notice.show = "Unsupported playback format: m3u8";
}
}
useEffect(() => {
const art = new Artplayer({
...option,
container: artRef.current,
type: "m3u8",
customType: {
m3u8: playM3u8,
},
fullscreen: true,
hotkey: true,
lock: true,
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
autoOrientation: true,
pip: true,
theme: "#f97316",
settings: [
{
html: "Quality",
width: 150,
tooltip: `${res}`,
selector: quality,
onSelect: function (item) {
art.switchQuality(item.url, item.html);
localStorage.setItem("quality", item.html);
return item.html;
},
},
],
});
if (getInstance && typeof getInstance === "function") {
getInstance(art);
}
return () => {
if (art && art.destroy) {
art.destroy(false);
}
};
}, []);
return <div ref={artRef} {...rest}></div>;
}
|