https://www.toavtrvg.cc/assets/__base/directives/VideoParser.js?v=1.8.10

1// 视频解析器
2
3;(function (doc, win) {
4    win["$Directives"] = {
5        ...win["$Directives"],
6        VideoParser: (video, binding, vnode) => {
7            const { value: videourl, modifiers = {} } = binding
8            if (!videourl) {
9                console.error(`视频加载失败原因：无效资源地址`)
10                video.setAttribute("poster", __networkerror)
11                video.style.objectFit = "cover"
12                return false
13            }
14
15            // 初始配置
16            const hls = new Hls()
17            const noloads = video.hasAttribute("data-no-loading")
18            const poster = video.getAttribute("data-poster") ?? null
19            const useTagAttributes = video.hasAttribute("data-init")
20            const hasMutedAttr = video.muted
21            // 初始加载
22            if (!noloads) video.setAttribute("poster", __loading)
23
24            // 加载封面图
25            $Directives.ImageParser({ imgurl: poster }).then(url => {
26                if (url) video.setAttribute("poster", url)
27            })
28
29            video.addEventListener("error", function () {
30                if (video?.error?.code === 4) {
31                    video.setAttribute("poster", __networkerror)
32                    video.style.objectFit = "cover"
33                    console.log("视频正常关闭")
34                } else {
35                    // console.error(`视频加载失败原因：`, video?.error?.code);
36                    // console.error(`视频加载失败原因：`, video?.error);
37                    // video.setAttribute('poster', __networkerror);
38                    // video.style.objectFit = 'cover';
39                }
40            })
41
42            hls.on(Hls.Events.ERROR, function (event, data) {
43                video.setAttribute("poster", __networkerror)
44                video.style.objectFit = "cover"
45                console.error(`视频加载失败原因：${data.type} - ${data.details}`)
46            })
47
48            // 交叉巡查
49            new IntersectionObserver((entries, observer) => {
50                if (entries.pop().isIntersecting) {
51                    // 创建资源
52                    const source = document.createElement("source")
53                    source.src = videourl
54                    source.type = "video/mp4"
55
56                    // 初始属性
57                    if (!useTagAttributes) {
58                        video.playsinline = true
59                        video.webkitPlaysinline = true
60                        // 由修饰符决定控制行为
61                        video.controls = useTagAttributes || modifiers.controls || false
62                        video.muted = modifiers.mute ?? true
63                        video.loop = modifiers.loop ?? false
64                        video.autoplay = modifiers.autoplay && !modifiers.manual
65                        video.controlslist = "nodownload noremoteplayback"
66                    }
67
68                    // 加载资源
69                    setTimeout(() => {
70                        const tryPlay = () => {
71                            const playPromise = video.play()
72                            if (playPromise !== undefined) {
73                                playPromise
74                                    .then(() => {
75                                        video.muted = hasMutedAttr
76                                        video.style.objectFit = "cover"
77                                    })
78                                    .catch(err => {
79                                        console.error("视频播放失败：", err)
80                                    })
81                            }
82                        }
83
84                        if (/\.m3u8($|\?)/.test(videourl)) {
85                            hls.loadSource(videourl)
86                            hls.attachMedia(video)
87                            hls.on(Hls.Events.MANIFEST_PARSED, () => {
88                                if (!modifiers.manual && modifiers.autoplay) {
89                                    tryPlay()
90                                }
91                            })
92                        } else {
93                            if (!modifiers.manual && modifiers.autoplay) {
94                                tryPlay()
95                            }
96                        }
97                    }, 0)
98
99                    // 停止触发
100                    observer.unobserve(video)
101                } else {
102                    console.log("@离开了")
103                }
104            }).observe(video)
105        }
106    }
107})(document, window)