我正在尝试为引导程序插件制作自定义视频控件，而我在使jQuery更加详细时遇到了麻烦。实际的jQuery代码可以工作，但我需要能够使jQuery有一些部分允许该视频的多个实例在一个页面中，以便插件更容易使用并且具有更少的限制。
到目前为止，这就是我所拥有的：
window.onload = function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play");
var muteButton = document.getElementById("mute");
var fullScreenButton = document.getElementById("full-screen");
// Sliders
var seekBar = document.getElementById("seek-bar");
var volumeBar = document.getElementById("volume-bar");
// Event listener for the play/pause button
$(playButton).click(function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
$(playButton).removeClass("glyphicon-play").addClass("glyphicon-pause");
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
$(playButton).removeClass("glyphicon-pause").addClass("glyphicon-play");
}
});
// play if video is clicked
$(video).click(function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
$(playButton).removeClass("glyphicon-play").addClass("glyphicon-pause");
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
$(playButton).removeClass("glyphicon-pause").addClass("glyphicon-play");
}
});
// Event listener for the mute button
$(muteButton).click(function() {
if (video.muted == false) {
// Mute the video
video.muted = true;
// Update the button text
$(muteButton).removeClass("glyphicon-volume-up").addClass("glyphicon-volume-off");
} else {
// Unmute the video
video.muted = false;
// Update the button text
$(muteButton).removeClass("glyphicon-volume-off").addClass("glyphicon-volume-up");
}
});
// Event listener for the full-screen button
$(fullScreenButton).click(function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
// Event listener for the seek bar
$(seekBar).change(function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Event listener for the volume bar
$(volumeBar).change(function() {
// Update the video volume
video.volume = volumeBar.value;
});
}
到目前为止，这是我对jQuery的全部内容，视频的基本html如下：
<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365" poster="pictures\MCR-Logo.png">
<source src="videos\MCR-TheLightBehindYourEyes.mp4" type="video/mp4">
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="play" class="play glyphicon glyphicon-play btn"></button>
<input type="range" id="seek-bar" value="0" max="100">
<button type="button" id="mute" class="glyphicon glyphicon-volume-up btn"></button>
<input type="range" id="volume-bar" min="0" max="1" step="0.01" value="1">
<button type="button" id="full-screen" class="glyphicon glyphicon-fullscreen btn"></button>
</div>
</div>
所以我基本上只需要知道如何在一个jQuery文件中运行多个视频元素，更重要的是，只能在文件的一部分中，因为其余部分需要具有插件的其他功能的代码。任何帮助对我来说都是非常有价值的，我需要知道如何快速完成这个，以便我可以开始使用插件的其他部分。
答案 0 :(得分：0)
由于您希望在同一页面中拥有多个实例，因此第一步是从id属性移动并开始使用类。
<div class="video-container">
<!-- Video -->
<video class="video" width="640" height="365" poster="pictures\MCR-Logo.png">
<source src="videos\MCR-TheLightBehindYourEyes.mp4" type="video/mp4">
</video>
<!-- Video Controls -->
<div class="video-controls">
<button type="button" class="play" class="play glyphicon glyphicon-play btn"></button>
<input type="range" class="seek-bar" value="0" max="100">
<button type="button" class="mute" class="glyphicon glyphicon-volume-up btn"></button>
<input type="range" class="volume-bar" min="0" max="1" step="0.01" value="1">
<button type="button" class="full-screen" class="glyphicon glyphicon-fullscreen btn"></button>
</div>
</div>
然后，您可以使用jQuery.each()函数对页面中的所有元素进行循环，然后为每个元素运行代码。
请参阅以下使用jQuery.each()功能的代码段。在每个循环中，$item是当前div.video-container元素的jQuery对象。
然后，您可以使用jQuery.find()查找控件按钮和video元素。
其余代码几乎相同，我所做的唯一改变就是重新使用jQuery选择器，有一个（在你的情况下很小）性能提升。
window.onload = function() {
$('.video-container').each(function(idx, item) {
var $item = $(item);
// Video
var video = $item.find(".video")[0];
// Buttons
var $playButton = $item.find(".play");
var $muteButton = $item.find(".mute");
var $fullScreenButton = $item.find(".full-screen");
// Sliders
var $seekBar = $item.find(".seek-bar");
var $volumeBar = $item.find(".volume-bar");
// Event listener for the play/pause button
$playButton.click(function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
$playButton.removeClass("glyphicon-play").addClass("glyphicon-pause");
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
$playButton.removeClass("glyphicon-pause").addClass("glyphicon-play");
}
});
// play if video is clicked
$(video).click(function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
$playButton.removeClass("glyphicon-play").addClass("glyphicon-pause");
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
$playButton.removeClass("glyphicon-pause").addClass("glyphicon-play");
}
});
// Event listener for the mute button
$muteButton.click(function() {
if (video.muted == false) {
// Mute the video
video.muted = true;
// Update the button text
$muteButton.removeClass("glyphicon-volume-up").addClass("glyphicon-volume-off");
} else {
// Unmute the video
video.muted = false;
// Update the button text
$muteButton.removeClass("glyphicon-volume-off").addClass("glyphicon-volume-up");
}
});
// Event listener for the full-screen button
$fullScreenButton.click(function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
// Event listener for the seek bar
$seekBar.change(function() {
// Calculate the new time
var time = video.duration * ($seekBar.val() / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
$seekBar.val(value);
});
// Event listener for the volume bar
$volumeBar.change(function() {
// Update the video volume
video.volume = volumeBar.val();
});
});
};
注意：我要改变的另一件事是向您的类（您的示例中的ID）添加一个前缀，以便它们是唯一的，并避免在其他CSS样式中使用。例如，您可以使用.play代替.bsvideo-play。