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

李恒道

前言

之前我们已经完成了自动打开对话框
我们发现对话框也有一个ifame

所以我们的目标大概有这些
1.实现自动播放
2.播放完毕后自动关闭
这节课我们先实现第一个目标
我们先实现根据url分别执行不同内容

if(location.href.indexOf('/sword/rp/play/toPlay')!==-1){
    InjectVideoPage()
}else{
    InjectButtonToBody()
}

根据路径判断toplay
如果存在toplay则是视频页面
不是则注入刷课按钮
然后我们分析我们要干什么
看这个class类比较显眼，先搜一下

找到了字符串拼接
透

这里目前并没有实际功能
我们继续往下看
找到了videojs初始化

我们打个断点测试一下

发现确实停在了这里
继续往里追
发现走到了init

init的里面初始化了一些基本配置，然后走到了Videos.init.call

我们可以看到了里面调用了videojs

之前也分析过很多源码了
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劫持即可

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跨网页通信

结语

撒花~