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

相关文章

  • nvm的下载,安装与使用方法图文详解

    nvm的下载,安装与使用方法图文详解

    这篇文章主要介绍了nvm的下载,安装与使用方法,详细介绍了nvm的功能、下载与安装方法,常见命令以及相关问题解决方法,需要的朋友可以参考下
    2023-04-04
  • node基于puppeteer模拟登录抓取页面的实现

    node基于puppeteer模拟登录抓取页面的实现

    本篇文章主要介绍了node基于puppeteer模拟登录抓取页面的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • NodeJs+MySQL实现注册登录功能

    NodeJs+MySQL实现注册登录功能

    这篇文章主要为大家详细介绍了NodeJs+MySQL实现注册登录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Node.js笔记之process模块解读

    Node.js笔记之process模块解读

    这篇文章主要介绍了Node.js process模块解读,process存在于全局对象上,不需要使用require()加载即可使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 基于node.js express mvc轻量级框架实践

    基于node.js express mvc轻量级框架实践

    下面小编就为大家带来一篇基于node.js express mvc轻量级框架实践。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • node中如何使用redis的实现

    node中如何使用redis的实现

    本文主要介绍了node中如何使用redis的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • Node.js中多进程模块Cluster的介绍与使用

    Node.js中多进程模块Cluster的介绍与使用

    众所周知Node.js是单线程的,一个单独的Node.js进程无法充分利用多核。Node.js从v0.6.0开始,新增cluster模块,让Node.js开发Web服务时,很方便的做到充分利用多核机器。这篇文章主要给大家介绍了关于Node.js中多进程模块Cluster的相关资料,需要的朋友可以参考下
    2017-05-05
  • Nodejs进阶:核心模块net入门学习与实例讲解

    Nodejs进阶:核心模块net入门学习与实例讲解

    本篇文章主要是介绍了Nodejs之NET模块,net模块是同样是nodejs的核心模块,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • Nodejs访问网络并解析返回的json的实现方法

    Nodejs访问网络并解析返回的json的实现方法

    本文主要介绍了Nodejs访问网络并解析返回的json的实现方法,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Windows系统下使用Sublime搭建nodejs环境

    Windows系统下使用Sublime搭建nodejs环境

    最近在研究Nodejs开发,俗话说,工欲善其事,必先利其器,当然要找到一款用着顺手的编辑器作为开始。这里我们选择的是Sublime Text 3,除了漂亮的用户界面,最吸引我的就是它的插件扩展功能以及跨平台特性。
    2015-04-04

最新评论