Nodejs中使用puppeteer控制浏览器中视频播放功能

本项目主要功能为在浏览器中自动播放视频，并且实现音量控制，快进快退，全屏控制，播放暂停控制等功能。

仓库地址：  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控制浏览器中视频播放功能,希望对大家有所帮助