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

赞 (0)

相关推荐

  • iOS中视频播放的基本方法总结

    iOS中视频播放的基本方法总结

    前言 本文总结了iOS中最常见的视频播放方法,不同的方法都各具特点,我希望能够总结它们的不同,方便在开发中选择合适的技术方案. Apple为我们提供了多种方法来实现视频播放,包括MPMoviePlayerController,MPMoviePlayerViewController,AVPlayer,AVPlayerViewController等.而值得注意的是,上述的MPMoviePlayerController与MPMoviePlayerViewController在iOS9.0之后被弃用.虽

  • 小程序视频列表中视频的播放与停止的示例代码

    小程序视频列表中视频的播放与停止的示例代码

    效果类似一条视频的小程序,就是视频列表,然后每个视频上覆盖一张视频的封面图,点击封面图的播放按钮视频播放,点击别的视频的时候,停止播放当前视频,播放点击的视频.差不多是这样: 一条视频 首先上代码: wxml <block wx:for="{{videoList}}"> <view class='video-item'> <view class='wrapper'> <video class='video-video' wx:if='{{ind

  • Python实现的视频播放器功能完整示例

    本文实例讲述了Python实现的视频播放器功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #! python3 # ---------------------------------------------------------------------------- # pyglet # Copyright (c) 2006-2008 Alex Holkner # All rights reserved. # # Redistribution and us

  • C# 使用WPF 用MediaElement控件实现视频循环播放

    在WPF里用MediaElement控件,实现一个循环播放单一视频的程序,同时可以控制视频的播放.暂停.停止. 一种方式,使用MediaElement.MediaEnded事件,在视频播放结束后,自动重新播放: 另一种方式,使用WPF定时器,在定时器事件里写入视频播放代码. 后者优点是可以控制循环时长,不必等到视频播放结束就可以开始下一次播放,比如:同时启动多个播放程序,使多个时长不同的视频同时播放,无限循环,如果采用第一种方式,累计多次自动播放后,视频内容就无法同步. 第一种方式: XAML:

  • react-native-video实现视频全屏播放的方法

    react-native-video实现视频全屏播放的方法

    react-native-video是github上一个专用于React Native做视频播放的组件.这个组件是React Native上功能最全最好用的视频播放组件,还在持续开发之中,虽然还有些bug,但基本不影响使用,强力推荐. 本篇文章主要介绍下怎么使用react-native-video播放视频,以及如何实现全屏播放,屏幕旋转时视频播放器大小随之调整,显示全屏或收起全屏. 首先来看看react-native-video有哪些功能. 基本功能 控制播放速率 控制音量大小 支持静音功能 支

  • Android ViewPager中显示图片与播放视频的填坑记录

    ViewPager介绍 ViewPager的功能就是可以使视图滑动,就像Lanucher左右滑动那样. ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包android-support-v4.jar里面. ViewPager: 1)ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类. 2)ViewPager类需要一个PagerAdapter适配器类给它提供数据. 3)ViewPager经常和Fragment一起使用,并且

  • Vue结合Video.js播放m3u8视频流的方法示例

    首先,我们需要在vue工程中安装video.js相关依赖. npm install --save video.js npm install --save videojs-contrib-hls 然后,我们需要引入videojs的css文件,例如在main.js中引入 import 'video.js/dist/video-js.css' 接着,我们在需要播放视频的页面引入js对象 import videojs from 'video.js' import 'videojs-contrib-hls

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

    本项目主要功能为在浏览器中自动播放视频,并且实现音量控制,快进快退,全屏控制,播放暂停控制等功能. 仓库地址:  github.com/hapiman/chr- 安装静态服务器 如果电脑上存在nodejs的环境,可以直接安装 anywhere 来访问 index.html 页面. 进入项目根目录,执行命令: anywhere ,然后浏览器会自动打开 http://localhost:8000 页面. 使用puppeteer自动化执行命令 通过在 nodejs 调用前端页面的方法,然后能够Sock

  • nodejs与浏览器中全局对象区别点总结

    Node.js中,一个.js文件就是一个完整的作用域(module,模块).因此 var 声明的变量只在当前.js文件中有效,而不是全局有效. 而global全局对象是独立于所有的.js(module,模块)之上的. 而在浏览器中的最顶层全局对象是window,var声明的变量默认绑定到window对象上 1. 全局对象的定义 概念:在程序的任何地方都可以访问的对象,称之为全局对象.对象的属性称为全局变量. 2. NodeJS中的全局变量总结 这里我们总结下在nodejs中,我们常用的全局变量有

  • NodeJS和浏览器中this关键字的不同之处

    NodeJS和浏览器中this关键字的不同之处

    前言 学习过JavaScript的人肯定清楚 处在不同环境下this的指向问题.那么看下面的代码 var type = 1 function toWhere(){ this.type = 2; } toWhere(); console.log(type) 你们肯定会这样想: 这里声明了一个全局变量type,当执行type=1的时候,赋值为1.之后toWhere函数调用,看到函数中有this 就去判断this的指向,这里很清楚,this指向了window,this.type=2执行后,全局变量ty

  • 浏览器中视频播放器实现的基本思路与代码

    浏览器中视频播放器实现的基本思路与代码

    目录 前言 浏览器中的音视频知识总结 视频编码 封装格式 音视频标签 常用属性 常用事件 常用方法 整体思路如下 代码实现 总结 前言 自定义个播放器,组件都是用的原生的,所以有点丑,重点关注业务逻辑吧. 界面大概长下面这个样子. 大家可以看着界面,在脑海中想一下自己会如何实现这个视频播放器.可以问自己以下几个问题: 这个组件会接受那些props 如何获取视频的基本信息,包括时长,分辨率等 暂停.播放如何实现 拖动进度条的逻辑如何实现 视频初始加载显示loading如何处理 视频播放过程中卡顿显

  • canvas 画布在主流浏览器中的尺寸限制详细介绍

    canvas 画布在主流浏览器中的尺寸限制详细介绍 通过测试发现,canvas在不同浏览器下面有不同的最大尺寸限制. 大家都知道,canvas有自身的width,height属性来控制尺寸,用css的width,height,控制显示的大小.可以理解为canvas就是一个img,属性的width,height就是这个img的原图像素大小.但在各浏览器下,设置canvas尺寸时发现有最大尺寸限制.测试一下与大家分享. 测试代码 <!DOCTYPE html> <html> <h

  • JavaScript 在各个浏览器中执行的耐性

    JavaScript 在各个浏览器中执行的耐性

    IE:执行超过500W条JScript引擎语句出现提示. Firefox:执行超过10秒出现提示. Safari:执行超过5秒出现提示. Opera:无论执行多久都不会出现提示,最有耐性. Chrome:执行超过约8秒(估计值)出现提示. 注:当弹出类似alert的模式对话框的时候,是不计时. 在Web开发的时候,经常会遇到的一种情况就是浏览器提示脚本运行时间过长,停止还是继续,无论你选择什么,相信你都会想尽一切办法让这个对话框远离你的用户们.可你是否知道,这些不同的浏览器究竟是如何判断,哪些脚

  • HTML下在IE浏览器中的专有条件注释讲解

    在进行WEB标准网页的学习和应用过程中,网页对浏览器的兼容性是经常接触到的一个问题.其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山,此外还有Firefox.Opera等.需要对这些浏览器进行兼容. 同时,单就IE而言,因IE版本的升级更替,目前浏览者使用的主要停留在 IE5(IE5.5).IE6和IE7这三个版本中.而这3个版本对于我们制作的WEB标准网页(XHTML+CSS)解释执行的显示状况不尽相同.并且,其他非IE浏览器与IE对某些CSS解释也不一样

  • vue.js中实现登录控制的方法示例

    本文实例讲述了vue.js中实现登录控制的方法.分享给大家供大家参考,具体如下: vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想之前熟悉的流程那样,不过只要大家理解vue-router的使用也是很好实现的. 首先我们需要编写登录页面和主页面: <template> <div class="login"> <table width="100%" height="100%"> &l

  • C++ 在 Unreal 中为游戏增加实时音视频互动的教程详解

    我们已经上线了 Agora Unreal SDK,提供了支持 Blueprint 和 C++ 的两个版本 SDK.我们分享了 如何基于 Blueprint 在游戏中创建实时音视频功能 .在本文中,我们来分享如何基于声网 Agora Unreal SDK C++版本,在游戏中实现实时音视频功能. 本篇教程较长,建议在 Web 浏览器端浏览,体验更好. 准备工作 需要的开发环境和需要准备的与 Blueprint 一样: Unreal 4.34 以上版本 Visual Studio 或 Xcode(版

  • JavaScript 如何在浏览器中使用摄像头

    1.获得摄像头权限(本文使用chrome) 首先确保你运行以下js所在的url是https协议的或者localhost的: const constrains = { video: true, audio: true } navigator.mediaDevices.getUserMedia(constrains) .then(stream => { console.log('得到stream的类型是MediaStream') }) // 在一些老的浏览器上的话: // navigator.web

随机推荐