https://heiliao.com/static/v4/__base/directives/VideoParser.js?v=2…0260910ndentrycss-20260811sharelinkrealtime

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