李恒道 发表于 2022-5-11 00:55:48

[脚本实战篇]实战静默播放视频及监听

# 前言
之前我们已经完成了自动打开对话框
我们发现对话框也有一个ifame
![图片.png](data/attachment/forum/202205/11/004702fsostft2tgykcyyz.png)
所以我们的目标大概有这些
1.实现自动播放
2.播放完毕后自动关闭
这节课我们先实现第一个目标
我们先实现根据url分别执行不同内容
```javascript
if(location.href.indexOf('/sword/rp/play/toPlay')!==-1){
    InjectVideoPage()
}else{
    InjectButtonToBody()
}
```
根据路径判断toplay
如果存在toplay则是视频页面
不是则注入刷课按钮
然后我们分析我们要干什么
看这个class类比较显眼,先搜一下
![图片.png](data/attachment/forum/202205/11/004842y6euytu1lwe65ut4.png)
找到了字符串拼接

![图片.png](data/attachment/forum/202205/11/004914kcz86cc22c7mvd9m.png)
这里目前并没有实际功能
我们继续往下看
找到了videojs初始化
![图片.png](data/attachment/forum/202205/11/004931zbom0ix5d3o5dm15.png)
我们打个断点测试一下
![图片.png](data/attachment/forum/202205/11/005117ejjqds7fqsr9y8tu.png)
发现确实停在了这里
继续往里追
发现走到了init
![图片.png](data/attachment/forum/202205/11/005132x8o11aobd7rj8nag.png)
init的里面初始化了一些基本配置,然后走到了Videos.init.call
![图片.png](data/attachment/forum/202205/11/005151bw5u0r55nv5dcroj.png)
我们可以看到了里面调用了videojs
![图片.png](data/attachment/forum/202205/11/005215l81nrtnjh6jj6gyb.png)
之前也分析过很多源码了
https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=1833
https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=1859&highlight=videojs
可以论坛搜一下
大概四五篇了
那我们抬手一个document-start加videojs劫持即可
```javascript
function InjectVideoPage(){
    unsafeWindow.savevideojs=undefined
    Object.defineProperty(unsafeWindow,'videojs',{
      get(){
            let result=unsafeWindow.savevideojs;
            return result
      },
      set(vdobj){
            vdobj.hook('beforesetup', function(videoEl, options) {
                options.muted=true;
                options.autoplay=true;
                return options;
            });
            vdobj.hook('setup', function(player) {
                console.log('setup',player)
                // 绑定结束事件
                player.on("ended", function() {
                  console.log('播放完毕')
                });

            });
            unsafeWindow.savevideojs=vdobj;

      }
    })
}
```
直接当设置videojs的时候混入两个钩子
在创建video视频对象之前设置静默播放,以及自动播放
静默播放是为了防止浏览器限制导致自动播放视频失败
具体参数可以查阅videojs的官方问大哥
而setup钩子是在video实例创建后
我们对ended事件监听,得到视频什么时候播放结束
那么我们测试一下

--------
可以看到正确打印了setup内的对象
实现了静默自动播放以及播放完毕监听的功能
那么下节课我们实现iframe跨网页通信
![图片.png](data/attachment/forum/202205/11/005458mhdur983j2r8jhow.png)
# 结语
撒花~
页: [1]
查看完整版本: [脚本实战篇]实战静默播放视频及监听