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文件操作模块FS(File System)常用函数简明总结
Jun 05 NodeJs
Nodejs学习笔记之Stream模块
Jan 13 NodeJs
NodeJS整合银联网关支付(DEMO)
Nov 09 NodeJs
Highcharts+NodeJS搭建数据可视化平台示例
Jan 01 NodeJs
详解nodeJS中读写文件方法的区别
Mar 06 NodeJs
详解NodeJS框架express的路径映射(路由)功能及控制
Mar 24 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
NodeJs中express框架的send()方法简介
Jun 20 NodeJs
深入理解NodeJS 多进程和集群
Oct 17 NodeJs
Nodejs实现用户注册功能
Apr 14 NodeJs
NodeJs使用webpack打包项目的方法详解
Feb 28 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 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
php常用图片处理类
2016/03/16 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PDO::query讲解
2019/01/29 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
利用python求积分的实例
2019/07/03 Python
Python目录和文件处理总结详解
2019/09/02 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
财务经理的岗位职责
2013/12/17 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript