您好,登錄后才能下訂單哦!
本項目主要功能為在瀏覽器中自動播放視頻,并且實現音量控制,快進快退,全屏控制,播放暫停控制等功能。
倉庫地址: 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控制瀏覽器中視頻播放功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。