Nodejs中使用puppeteer控制瀏覽器中視頻播放功能
本項(xiàng)目主要功能為在瀏覽器中自動(dòng)播放視頻,并且實(shí)現(xiàn)音量控制,快進(jìn)快退,全屏控制,播放暫??刂频裙δ?。
倉(cāng)庫(kù)地址: github.com/hapiman/chr…
安裝靜態(tài)服務(wù)器
如果電腦上存在nodejs的環(huán)境,可以直接安裝 anywhere 來(lái)訪問(wèn) index.html 頁(yè)面。 進(jìn)入項(xiàng)目根目錄,執(zhí)行命令: anywhere ,然后瀏覽器會(huì)自動(dòng)打開(kāi) http://localhost:8000 頁(yè)面。
使用puppeteer自動(dòng)化執(zhí)行命令
通過(guò)在 nodejs 調(diào)用前端頁(yè)面的方法,然后能夠Socket實(shí)現(xiàn)遠(yuǎn)程控制瀏覽器的視頻播放。
具體功能實(shí)現(xiàn)
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 } // 快進(jìn) 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 } // 頁(yè)面加載之后執(zhí)行命令 function start() { var myVideo = getVideo() myVideo.volume = 1 myVideo.playbackRate = 1 } // 設(shè)置靜音 function setMuted() { getVideo().muted = true } // 設(shè)置非靜音 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() } // 打開(kāi)全屏 function openFull() { getVideo().webkitRequestFullscreen() } // 音量 -- function reduceVolume() { console.log('reduceVolume:: current volume: ', myVideo.volume) // 當(dāng)前音量 getVideo().muted = false if (_volumeNum <= 0) return _volumeNum = accSub(_volumeNum, 0.1) getVideo().volume = _volumeNum } // 音量 ++ function addVolume() { console.log('addVolume:: current volume: ', myVideo.volume) // 當(dāng)前音量 getVideo().muted = false if (_volumeNum >= 1) return _volumeNum = accAdd(_volumeNum, 0.1) getVideo().volume = _volumeNum }
遇到的問(wèn)題
關(guān)于人工觸發(fā)
打開(kāi)網(wǎng)頁(yè)的時(shí)候,autoplay可以自動(dòng)播放,但是是靜音模式,從76版本開(kāi)始,chrome瀏覽器安全機(jī)制不再允許有聲自動(dòng)播放視頻。
同樣的,處于安全考慮,瀏覽器也不能夠在沒(méi)有用戶操作的情況,通過(guò)接口設(shè)置為全屏。
當(dāng)前項(xiàng)目引入 puppeteer 目的就是為了模擬人工觸發(fā)頁(yè)面的情況。
總結(jié)
以上所述是小編給大家介紹的Nodejs中使用puppeteer控制瀏覽器中視頻播放功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- Node爬蟲(chóng)工具Puppeteer入門教程實(shí)踐
- Windows下Node爬蟲(chóng)神器Puppeteer安裝記
- node基于puppeteer模擬登錄抓取頁(yè)面的實(shí)現(xiàn)
- node puppeteer(headless chrome)實(shí)現(xiàn)網(wǎng)站登錄
- 詳解Node使用Puppeteer完成一次復(fù)雜的爬蟲(chóng)
- Node Puppeteer圖像識(shí)別實(shí)現(xiàn)百度指數(shù)爬蟲(chóng)的示例
- node?puppeteer爬蟲(chóng)爬取電影網(wǎng)站及生成pdf文檔示例
相關(guān)文章
Node.js使用supervisor進(jìn)行開(kāi)發(fā)中調(diào)試的方法
今天小編就為大家分享一篇關(guān)于Node.js使用supervisor進(jìn)行開(kāi)發(fā)中調(diào)試的方法,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-03-03HTTP JSON接口模擬工具Interfake快速入門教程
這篇文章主要為大家介紹了HTTP JSON接口模擬工具Interfake快速入門教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06express框架實(shí)現(xiàn)基于Websocket建立的簡(jiǎn)易聊天室
本篇文章主要介紹了express框架實(shí)現(xiàn)基于Websocket建立的簡(jiǎn)易聊天室,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08node基于async/await對(duì)mysql進(jìn)行封裝
這篇文章主要介紹了node基于async/await對(duì)mysql進(jìn)行封裝,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06詳解node child_process模塊學(xué)習(xí)筆記
這篇文章主要介紹了詳解node child_process模塊學(xué)習(xí)筆記,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01npm?install安裝失敗常見(jiàn)問(wèn)題的解決辦法小結(jié)
有時(shí)候前端安裝npm install 安裝包總是安裝不上,下面這篇文章主要給大家介紹了關(guān)于npm?install安裝失敗常見(jiàn)問(wèn)題的解決辦法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05