The main functions of this project are to automatically play videos in the browser, and to realize volume control, fast forward and rewind, full screen control, playback pause control and other functions.
Warehouse address: /hapiman/chr…
Install a static server
If there is a nodejs environment on your computer, you can directly install anywhere to access the page. Enter the project root directory, execute the command: anywhere, and the browser will automatically open.http://localhost:8000page.
Use puppeteer to automate command execution
By calling the front-end page method in nodejs, you can then remotely control the browser's video playback.
Implement specific functions
var _volumeNum = 1 // Volume value var _speedNum = 1 // Speed value var videoSrc = 'demo02.mp4' // Switch resources = function () {
var myVideo = ('myVideo')
var scSource = ('sc')
var myVideoBody = { pause: true }
// Playback completion command ('ended', function () {
= videoSrc;
()
()
})
// Initialization start()
}
// Get video function getVideo() {
var myVideo = ('myVideo')
return myVideo
}
// fast forward function vforward(params) {
if (_speedNum >= 2) return
_speedNum = accAdd(_speedNum, 0.1)
('vforward _speedNum: ', _speedNum)
getVideo().playbackRate = _speedNum
}
// Retreat quickly function vbackward() {
if (_speedNum <= 0.5) return
var myVideo = getVideo()
_speedNum = accSub(_speedNum, 0.1)
('vbackward _speedNum: ', _speedNum)
getVideo().playbackRate = _speedNum
}
// Execute the command after the page is loaded function start() {
var myVideo = getVideo()
= 1
= 1
}
// Set mute function setMuted() {
getVideo().muted = true
}
// Set non-mute function setNotMuted() {
getVideo().muted = false
}
// Play function vplay() {
('vplay =>')
getVideo().play();
}
// pause function vstop() {
getVideo().pause();
}
// Replay function vrestart() {
getVideo().currentTime = 0
getVideo().play()
}
// Cancel full screen function cancelFull() {
()
}
// Turn on full screen function openFull() {
getVideo().webkitRequestFullscreen()
}
// Volume -- function reduceVolume() {
('reduceVolume:: current volume: ', ) // Current volume getVideo().muted = false
if (_volumeNum <= 0) return
_volumeNum = accSub(_volumeNum, 0.1)
getVideo().volume = _volumeNum
}
// Volume ++ function addVolume() {
('addVolume:: current volume: ', ) // Current volume getVideo().muted = false
if (_volumeNum >= 1) return
_volumeNum = accAdd(_volumeNum, 0.1)
getVideo().volume = _volumeNum
}
Problems encountered
About manual triggering
When opening a web page, autoplay can automatically play, but it is in silent mode. Starting from version 76, the Chrome browser security mechanism no longer allows audio automatic playback of videos.
Similarly, for security considerations, the browser cannot be set to full screen through the interface without user operation.
The purpose of the current project introduction puppeteer is to simulate the situation where pages are triggered manually.
Summarize
The above is the editor introduced to you by using puppeteer to control the video playback function in the browser. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!