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

 更新时间:2019年08月26日 17:20:44   作者:大漠胡萝卜  
本项目主要功能为在浏览器中自动播放视频,并且实现音量控制,快进快退,全屏控制,播放暂停控制等功能。对Nodejs中使用puppeteer控制浏览器中视频播放功能感兴趣的朋友跟随小编一起看看吧

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

仓库地址:  github.com/hapiman/chr…

安装静态服务器

如果电脑上存在nodejs的环境,可以直接安装 anywhere 来访问 index.html 页面。 进入项目根目录,执行命令: anywhere ,然后浏览器会自动打开 http://localhost:8000 页面。

使用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控制浏览器中视频播放功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • Node.js使用supervisor进行开发中调试的方法

    Node.js使用supervisor进行开发中调试的方法

    今天小编就为大家分享一篇关于Node.js使用supervisor进行开发中调试的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • NodeJS学习笔记之MongoDB模块

    NodeJS学习笔记之MongoDB模块

    nodejs是个强大的平台,有基本功能,而且可以挂很多模块。我们现在需要和mongodb连接的驱动,就类似比如mysql的java驱动一样。nodejs有好几个mongodb的第三方驱动。和jdbc不一样,没有标准。所以需要到驱动的网站上去了解学习怎么使用它访问mongodb。
    2015-01-01
  • 三行命令切换Node.js版本的流程步骤

    三行命令切换Node.js版本的流程步骤

    如何在Windows上更新Node.js版本呢?有没有那种不需要重新安装软件再修改配置文件和环境变量的方法?你是否还在为可能要重新安装Node然后配置文件修改环境变量困扰?面就来介绍一下nvm更换node版本的步骤,需要的朋友可以参考下
    2024-01-01
  • HTTP JSON接口模拟工具Interfake快速入门教程

    HTTP JSON接口模拟工具Interfake快速入门教程

    这篇文章主要为大家介绍了HTTP JSON接口模拟工具Interfake快速入门教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • express框架实现基于Websocket建立的简易聊天室

    express框架实现基于Websocket建立的简易聊天室

    本篇文章主要介绍了express框架实现基于Websocket建立的简易聊天室,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • node基于async/await对mysql进行封装

    node基于async/await对mysql进行封装

    这篇文章主要介绍了node基于async/await对mysql进行封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • Node.js原生api搭建web服务器的方法步骤

    Node.js原生api搭建web服务器的方法步骤

    这篇文章主要介绍了Node.js原生api搭建web服务器的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • Zabbix添加Node.js监控的方法

    Zabbix添加Node.js监控的方法

    这篇文章主要介绍了Zabbix添加Node.js监控的方法,非常不错具有一定的参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • 详解node child_process模块学习笔记

    详解node child_process模块学习笔记

    这篇文章主要介绍了详解node child_process模块学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • npm install安装失败常见问题的解决办法小结

    npm install安装失败常见问题的解决办法小结

    有时候前端安装npm install 安装包总是安装不上,下面这篇文章主要给大家介绍了关于npm install安装失败常见问题的解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05

最新评论