本項目主要功能為在瀏覽器中自動播放視頻，并且實現音量控制，快進快退，全屏控制，播放暫停控制等功能。

倉庫地址：  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瀏覽器安全機制不再允許有聲自動播放視頻。

同樣的，處于安全考慮，瀏覽器也不能夠在沒有用戶操作的情況，通過接口設置為全屏。