使用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目的就是爲了模擬人工觸發頁面的狀況。