javascript JS - 自定义视频播放控件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript JS - 自定义视频播放控件相关的知识,希望对你有一定的参考价值。

let video = document.getElementById('videoElement');
let playButton = document.querySelector('.play');
let muteButton = document.querySelector('.audio');
let fullScreenButton = document.querySelector('.fullscreen');

// Event listener for the play/pause button
playButton.addEventListener("click", function() {
	if (video.paused == true) {
		// Play the video
		video.play();
		playButton.classList.remove("paused");
	} else {
		// Pause the video
		video.pause();
		playButton.classList.add("paused");
	}
});
// Event listener for the mute button
muteButton.addEventListener("click", function() {
	if (video.muted == false) {
		// Mute the video
		video.muted = true;
		muteButton.classList.remove("unmuted");
	} else {
		// Unmute the video
		video.muted = false;
		muteButton.classList.add("unmuted");
	}
});

// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
	if (video.requestFullscreen) {
		video.requestFullscreen();
	} else if (video.mozRequestFullScreen) {
		video.mozRequestFullScreen(); // Firefox
	} else if (video.webkitRequestFullscreen) {
		video.webkitRequestFullscreen(); // Chrome and Safari
	}
});

以上是关于javascript JS - 自定义视频播放控件的主要内容,如果未能解决你的问题,请参考以下文章

YouTube JS API 自定义播放器跳过/下一个视频功能

如何使自定义视频播放器适用于多个视频?

无法让我的自定义播放按钮在我的视频播放器上工作

使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

添加自定义控件以响应 video.js 控件的活动状态