我的网站上有一个 HTML5 视频播放器，其中包含三个视频。我发现的代码只支持每个网页一个视频，但我设法进行了修改，使其可以在每个页面上处理多个视频。这个黑客的效率相当低，我相信有一种更优雅的方法来实现这一点。我的代码如下所示:
// Video
var video = document.getElementById("video");
var video2 = document.getElementById("video2");
var video3 = document.getElementById("video3");
// Buttons
var playButton = document.getElementById("play-pause");
var playButton2 = document.getElementById("play-pause2");
var playButton3 = document.getElementById("play-pause3");
// Event listener for the play/pause button 1
playButton.addEventListener("click", function () {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
document.getElementById("play-pause").className = "pause";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
document.getElementById("play-pause").className = "play";
}
});
// Event listener for the play/pause button 2
playButton2.addEventListener("click", function () {
if (video2.paused == true) {
// Play the video
video2.play();
// Update the button text to 'Pause'
document.getElementById("play-pause2").className = "pause";
} else {
// Pause the video
video2.pause();
// Update the button text to 'Play'
document.getElementById("play-pause2").className = "play";
}
});
// Event listener for the play/pause button 3
playButton3.addEventListener("click", function () {
if (video3.paused == true) {
// Play the video
video3.play();
// Update the button text to 'Pause'
document.getElementById("play-pause3").className = "pause";
} else {
// Pause the video
video3.pause();
// Update the button text to 'Play'
document.getElementById("play-pause3").className = "play";
}
});
}
正如您所看到的，我只是简单地复制事件监听器并创建新变量。必须有一种方法可以根据所选的特定 Div 选择目标，也许通过指定类的路径？ IE。 .container .video1 .play？
我遇到的第二个问题是在视频播放完毕后将暂停按钮和海报图像恢复到原始状态。
这是放置代码和内容的站点:
http://www.glowdigital.net/index.php?page=snap-inspire
任何帮助将不胜感激!
谢谢
最佳答案
There must be a way to select the target based on the specific Div selected, maybe through specifying the path of the class?
是的，有更好的方法来处理一组元素的事件。
事件委托(delegate)是指在目标元素共有的祖先元素上注册事件监听器。
可以通过跟踪索引号来使用数组。
以下演示将解决后者。
The second problem I am having is reverting the pause button and poster image back to the original state after the video has finished playing.
有很多方法可以解决这个问题。该演示演示了 CSS ::after 伪元素和 add/removeClass() 方法的使用。
我还添加了专有的播放功能。如果一个玩家正在玩并且 另一个玩家开始玩，正在玩的玩家将停止玩。
详细信息在演示中评论
演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>HTML5 Video Player Group - Exclusive Playback</title>
<style>
button {
color: rgba(66, 200, 150, 1);
background: none;
border: 0;
font: 400 24px/1 Verdana;
outline: 0;
cursor: pointer;
}
button:hover,
button:active,
button:focus {
color: #0F3
}
.play.toPause::after {
content: '⏸';
font: inherit;
}
.play.toPlay::after {
content: '▶';
font: inherit;
}
.stop::after {
content: '⏹';
font: inherit;
}
</style>
</head>
<body>
<header> </header>
<main id="media">
<figure class="vSection">
<video id="v0" width="320" height="auto" poster="http://www.glowdigital.net/images/projects/snap-inspire-1.jpg">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-1.webm" type="video/webm">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-1.mp4" type="video/mp4">
</video>
<figcaption class="controls">
<button type="button" class="play toPlay"></button>
<button type="button" class="stop"></button>
</figcaption>
</figure>
<figure class="vSection">
<video id="v1" width="320" height="auto" poster="http://www.glowdigital.net/images/projects/snap-inspire-2.jpg">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-2.webm" type="video/webm">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-2.mp4" type="video/mp4">
</video>
<figcaption class="controls">
<button type="button" class="play toPlay"></button>
<button type="button" class="stop"></button>
</figcaption>
</figure>
<figure class="vSection">
<video id="v2" width="320" height="auto" poster="http://www.glowdigital.net/images/projects/snap-inspire-3.jpg">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-3.webm" type="video/webm">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-3.mp4" type="video/mp4">
</video>
<figcaption class="controls">
<button type="button" class="play toPlay"></button>
<button type="button" class="stop"></button>
</figcaption>
</figure>
</main>
<footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
// Gather all <video> into a NodeList then convert it into an array
var videos = Array.from(document.querySelectorAll('video'));
/* map() through array assigning an id to each <video>
|| vArray is returned; an array of <video id='..'>
*/
var vArray = videos.map(function(vid, idx) {
var player = document.getElementById(vid.id);
return player;
});
// When a button.play is clicked...
$('.play').on('click', function(e) {
// Get it's index number
var idx = $('.play').index(this);
/* Invoke functiom excPlay passing the vArray and idx
|| It stops any player if it's playing and the prepares
|| the specified player to play. See bottom of source
|| for details
*/
var player = excPlay(vArray, idx);
// If paused or ended...
if (player.paused || player.ended) {
// Play video
player.play();
// Switch the classes for the all buttons to the paused state
$('.play').removeClass('toPause').addClass('toPlay');
// Switch this button to the playing state
$(e.target).addClass('toPause').removeClass('toPlay');
}
//...Otherwise...
else {
// Pause the video
player.pause();
// Switch all buttons to the paused state
$('.play').removeClass('toPause').addClass('toPlay');
}
// Click thebutton.stop...
$('.stop').on('click', function(e) {
// Get index number
var index = $('.stop').index(this);
// See line 73
var player = excPlay(vArray, index);
// Pause the video
player.pause();
// Set video's time back to 0
player.currentTime = 0;
});
// If a video ends...
$('video').on('ended', function() {
// Reset the time
this.currentTime = 0;
// Get its poster value...
var image = this.poster;
// ,,,then set it
this.poster = image;
// Set all buttons to pause state
$('.play').removeClass('toPause').addClass('toPlay');
});
/* Pass in an array of video objects and the index number of
|| thevideo you want to play.
*/
function excPlay(array, exclude) {
// map() the array of videos; on each loop...
array.map(function(video, index) {
// If the video isn't the video you want to play...
if (index != exclude) {
// Get the video's poster
var image = video.poster;
// Set the time back to the beginning
video.currentTime = 0;
// Pauase video
video.pause();
// Reset the poster image
video.poster = image;
}
});
// Toggle the classes on the play button
$('.play').removeClass('toPause').addClass('toPlay');
// Return the selected player or nothing
return array[exclude] || null;
}
});
</script>
</body>
</html>关于javascript - 针对 HTML5 视频播放器优化的 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46380999/