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+express+html5 实现拖拽上传
Aug 08 NodeJs
轻松创建nodejs服务器(10):处理上传图片
Dec 18 NodeJs
Nodejs学习笔记之入门篇
Apr 16 NodeJs
详解nodejs与javascript中的aes加密
May 22 NodeJs
详解nodejs微信公众号开发——2.自动回复
Apr 10 NodeJs
nodejs个人博客开发第三步 载入页面
Apr 12 NodeJs
Nodejs模块载入运行原理
Feb 23 NodeJs
nodejs读取本地中文json文件出现乱码解决方法
Oct 10 NodeJs
Nodejs实现用户注册功能
Apr 14 NodeJs
typescript nodejs 依赖注入实现方法代码详解
Jul 21 NodeJs
nodejs语言实现验证码生成功能的示例代码
Oct 13 NodeJs
Nodejs在局域网配置https访问的实现方法
Oct 17 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开发入门教程之面向对象
2006/12/05 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
python查看FTP是否能连接成功的方法
2015/07/30 Python
详解python编译器和解释器的区别
2019/06/24 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
django rest framework 自定义返回方式
2020/07/12 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
毕业生的自我评价分享
2013/12/18 职场文书
财务会计自荐信范文
2014/02/21 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
主题教育活动总结
2014/05/05 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js