【发布时间】：2017-09-25 02:30:34
【问题描述】：
我的网站上有一个包含三个视频的 HTML5 视频播放器。我发现的代码每个网页只支持一个视频，但我设法做了一个 hack，使它可以在每个页面上处理多个视频。 hack 效率很低，我相信有一种更优雅的方式来实现它。这是我的代码的样子：
// 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
任何帮助将不胜感激！
谢谢
【问题讨论】：
标签： javascript jquery html video