上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    慵懒
    4 天前
  • 签到天数: 193 天

    [LV.7]常住居民III

    710

    主题

    5882

    回帖

    6705

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6705

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-5-11 00:55:48 | 显示全部楼层 | 阅读模式

    前言

    之前我们已经完成了自动打开对话框
    我们发现对话框也有一个ifame
    图片.png
    所以我们的目标大概有这些
    1.实现自动播放
    2.播放完毕后自动关闭
    这节课我们先实现第一个目标
    我们先实现根据url分别执行不同内容

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

    根据路径判断toplay
    如果存在toplay则是视频页面
    不是则注入刷课按钮
    然后我们分析我们要干什么
    看这个class类比较显眼,先搜一下
    图片.png
    找到了字符串拼接

    图片.png
    这里目前并没有实际功能
    我们继续往下看
    找到了videojs初始化
    图片.png
    我们打个断点测试一下
    图片.png
    发现确实停在了这里
    继续往里追
    发现走到了init
    图片.png
    init的里面初始化了一些基本配置,然后走到了Videos.init.call
    图片.png
    我们可以看到了里面调用了videojs
    图片.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劫持即可

    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

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表