欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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