Nodejs中使用puppeteer控制浏览器中视频播放功能
程序员文章站
2022-07-05 12:11:16
本项目主要功能为在浏览器中自动播放视频,并且实现音量控制,快进快退,全屏控制,播放暂停控制等功能。
仓库地址: github.com/hapiman/chr…...
本项目主要功能为在浏览器中自动播放视频,并且实现音量控制,快进快退,全屏控制,播放暂停控制等功能。
仓库地址: github.com/hapiman/chr…
安装静态服务器
如果电脑上存在nodejs的环境,可以直接安装 anywhere 来访问 index.html 页面。 进入项目根目录,执行命令: anywhere ,然后浏览器会自动打开 页面。
使用puppeteer自动化执行命令
通过在 nodejs 调用前端页面的方法,然后能够socket实现远程控制浏览器的视频播放。
具体功能实现
var _volumenum = 1 // 音量值 var _speednum = 1 // 速度值 var videosrc = 'demo02.mp4' // 切换资源 window.onload = function () { var myvideo = document.getelementbyid('myvideo') var scsource = document.getelementbyid('sc') var myvideobody = { pause: true } // 播放完成指令 myvideo.addeventlistener('ended', function () { scsource.src = videosrc; myvideo.load() myvideo.play() }) // 初始化 start() } // 获取video function getvideo() { var myvideo = document.getelementbyid('myvideo') return myvideo } // 快进 function vforward(params) { if (_speednum >= 2) return _speednum = accadd(_speednum, 0.1) console.log('vforward _speednum: ', _speednum) getvideo().playbackrate = _speednum } // 快退 function vbackward() { if (_speednum <= 0.5) return var myvideo = getvideo() _speednum = accsub(_speednum, 0.1) console.log('vbackward _speednum: ', _speednum) getvideo().playbackrate = _speednum } // 页面加载之后执行命令 function start() { var myvideo = getvideo() myvideo.volume = 1 myvideo.playbackrate = 1 } // 设置静音 function setmuted() { getvideo().muted = true } // 设置非静音 function setnotmuted() { getvideo().muted = false } // 播放 function vplay() { console.log('vplay =>') getvideo().play(); } // 暂停 function vstop() { getvideo().pause(); } // 重播 function vrestart() { getvideo().currenttime = 0 getvideo().play() } // 取消全屏 function cancelfull() { screenfull.exit() } // 打开全屏 function openfull() { getvideo().webkitrequestfullscreen() } // 音量 -- function reducevolume() { console.log('reducevolume:: current volume: ', myvideo.volume) // 当前音量 getvideo().muted = false if (_volumenum <= 0) return _volumenum = accsub(_volumenum, 0.1) getvideo().volume = _volumenum } // 音量 ++ function addvolume() { console.log('addvolume:: current volume: ', myvideo.volume) // 当前音量 getvideo().muted = false if (_volumenum >= 1) return _volumenum = accadd(_volumenum, 0.1) getvideo().volume = _volumenum }
遇到的问题
关于人工触发
打开网页的时候,autoplay可以自动播放,但是是静音模式,从76版本开始,chrome浏览器安全机制不再允许有声自动播放视频。
同样的,处于安全考虑,浏览器也不能够在没有用户操作的情况,通过接口设置为全屏。
当前项目引入 puppeteer 目的就是为了模拟人工触发页面的情况。
总结
以上所述是小编给大家介绍的nodejs中使用puppeteer控制浏览器中视频播放功能,希望对大家有所帮助
上一篇: c# 实现位图算法(BitMap)
下一篇: Node爬取大批量文件的方法示例