一个视频页面，htmlDOM加载完毕，而视频没加载成功播放，

wjy0

一个视频页面，htmlDOM加载完毕，而视频没加载成功播放，会触发onload事件吧？
如何检测页面是否加载超时、加载不完全、页面视频加载不成功呢！

wjy0

https://bbs.tampermonkey.net.cn/thread-591-1-1.html
我提问过了啊

wjy0

其实场景就是挂机看网课，偶尔会出现页面加载不成功或页面视频加载不成功的情况！

李恒道

我个人的方案是监控视频的进度事件
每隔20s检测一下时长是否变化
如果变化证明还在播放
如果没变化了证明播放完毕或者播放失败了

cxxjackie

我觉得这个问题可以简化为：如果到达规定的超时时间后视频仍然无法播放，那就刷新页面。这样就不用管onload，因为页面加载不成功必然会导致视频无法播放。下面的方法用到了ElementGetter（https://bbs.tampermonkey.net.cn/thread-2726-1-1.html）：

1. const elmGetter = new ElementGetter();
   
2. function waitForVideoLoad(selector, timeout) {
   
3.     return new Promise((resolve, reject) => {
   
4.         elmGetter.get(selector, document, timeout).then(video => {
   
5.             if (video) {
   
6.                 if (video.duration > 0) resolve();
   
7.                 video.addEventListener('canplay', resolve);
   
8.             }
   
9.         });
   
10.         setTimeout(reject, timeout);
    
11.     });
    
12. }
    
13. // 选择器和超时时间可根据需要修改
    
14. waitForVideoLoad('video', 10000).catch(() => location.reload());

复制代码

wjy0

cxxjackie 发表于 2022-7-22 21:18
我觉得这个问题可以简化为：如果到达规定的超时时间后视频仍然无法播放，那就刷新页面。这样就不用管onload ...

谢谢，后来我是这个思路，自己写的代码