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学习小结(一)
Jul 06 NodeJs
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
Sep 26 NodeJs
Nodejs学习笔记之Global Objects全局对象
Jan 13 NodeJs
详解Nodejs基于mongoose模块的增删改查的操作
Dec 21 NodeJs
Nodejs 获取时间加手机标识的32位标识实现代码
Mar 07 NodeJs
详解nodejs操作mongodb数据库封装DB类
Apr 10 NodeJs
Nodejs之http的表单提交
Jul 07 NodeJs
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
Sep 06 NodeJs
nodejs实现大文件(在线视频)的读取
Oct 16 NodeJs
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
May 30 NodeJs
nodejs的安装使用与npm的介绍
Sep 11 NodeJs
NodeJS开发人员常见五个错误理解
Oct 14 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
ajax缓存问题解决途径
2006/12/06 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php自定义apk安装包实例
2014/10/20 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
基于vue.js无缝滚动效果
2018/01/25 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
python+mysql实现教务管理系统
2019/02/20 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
2014大学辅导员工作总结
2014/12/02 职场文书
获奖感言范文
2015/07/31 职场文书
车间班组长竞聘书
2015/09/15 职场文书
导游词之西安骊山
2019/12/03 职场文书
Python的三个重要函数详解
2022/01/18 Python
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript