热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

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

本项目主要功能为在浏览器中自动播放视频,并且实现音量控制,快进快退,全屏控制,播放暂停控制等功能。对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控制浏览器中视频播放功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


推荐阅读
  • 本文由编程笔记#小编为大家整理,主要介绍了markdown[软件代理设置]相关的知识,希望对你有一定的参考价值。 ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议(超文本传输协议)是用于从WWW服务 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 禁止程序接收鼠标事件的工具_VNC Viewer for Mac(远程桌面工具)免费版
    VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ... [详细]
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • Windows7企业版怎样存储安全新功能详解
    本文介绍了电脑公司发布的GHOST WIN7 SP1 X64 通用特别版 V2019.12,软件大小为5.71 GB,支持简体中文,属于国产软件,免费使用。文章还提到了用户评分和软件分类为Win7系统,运行环境为Windows。同时,文章还介绍了平台检测结果,无插件,通过了360、腾讯、金山和瑞星的检测。此外,文章还提到了本地下载文件大小为5.71 GB,需要先下载高速下载器才能进行高速下载。最后,文章详细解释了Windows7企业版的存储安全新功能。 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • asp中如何嵌入python的简单介绍
    本文目录一览:1、如何在IIS中执行Python脚本 ... [详细]
  • FIN7后门工具伪装成白帽工具进行传播
    fin7,后门,工具,伪装,成,白, ... [详细]
  • css元素可拖动,如何使用CSS禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
  • Scrapy 爬取图片
    1.创建Scrapy项目scrapystartprojectCrawlMeiziTuscrapygenspiderMeiziTuSpiderhttps:movie.douban.c ... [详细]
  • 目录爬虫06scrapy框架1.scrapy概述安装2.基本使用3.全栈数据的爬取4.五大核心组件对象5.适当提升scrapy爬取数据的效率6.请求传参爬虫06scrapy框架1. ... [详细]
  • 博主使用代理IP来自于网上免费提供高匿IP的这个网站用到的库frombs4importBeautifulSoupimportrandomimporturllib.re ... [详细]
author-avatar
手机用户2502939795
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有