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


Posted in NodeJs onAugust 26, 2019

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

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

NodeJs 相关文章推荐
NodeJS与Mysql的交互示例代码
Aug 18 NodeJs
nodejs中转换URL字符串与查询字符串详解
Nov 26 NodeJs
NodeJS制作爬虫全过程(续)
Dec 22 NodeJs
nodejs个人博客开发第三步 载入页面
Apr 12 NodeJs
详解Nodejs之静态资源处理
Jun 05 NodeJs
Express+Nodejs 下的登录拦截实现代码
Jul 01 NodeJs
用nodejs实现json和jsonp服务的方法
Aug 25 NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 NodeJs
Nodejs下使用gm圆形裁剪并合成图片的示例
Feb 22 NodeJs
Nodejs模块载入运行原理
Feb 23 NodeJs
修改Nodejs内置的npm默认配置路径方法
May 13 NodeJs
监控Nodejs的性能实例代码
Jul 02 NodeJs
nodejs简单抓包工具使用详解
Aug 23 #NodeJs
nodejs使用node-xlsx生成excel的方法示例
Aug 22 #NodeJs
Nodejs libuv运行原理详解
Aug 21 #NodeJs
nodejs和react实现即时通讯简易聊天室功能
Aug 21 #NodeJs
Nodejs 识别图片类型的方法
Aug 15 #NodeJs
NodeJs实现简易WEB上传下载服务器
Aug 10 #NodeJs
NodeJs 实现简单WebSocket即时通讯的示例代码
Aug 05 #NodeJs
You might like
PHP+MySQL修改记录的方法
2015/01/21 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
Javascript基础教程之数据类型转换
2015/01/18 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
实习自荐信
2013/10/13 职场文书
优秀党员主要事迹
2014/01/19 职场文书
医院搬迁方案
2014/06/14 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
领导干部保密承诺书
2014/08/30 职场文书
介绍信如何写
2015/01/31 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
教师节班会主持词
2015/07/06 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书