我有一个视频播放器，我试图用javascript控制。它看起来像这样：
<iframe height="309" width="500" frameborder="0" id="video_player" src="" allowfullscreen></iframe>
视频播放器源现在没什么。但后来我命令它等于youtube链接。还有两个按钮来控制电影的哪个部分。这是我的麻烦所在。我可以遍历第一个加载的视频而不是剩余的视频。对我来说太复杂了。
<button id="back_btn" style="float:left">Back</button>
<button id="next_btn" style="float:right">Next</button>
在视频播放器和按钮之后，我添加了控制它的代码。我使用for循环生成视频菜单。我将视频数据存储在一个多维数组中。当我使用术语多维数组时，我觉得我来自外太空。就像让我们打开多维门户来获取视频数据一样。然后我不得不使用模块模式在我为每个菜单项创建的每个事件监听器中存储i的值。我在没有jQuery库的情况下制作了这个程序的版本，代码似乎没有那么短。我的工作技巧。
<script type="text/javascript">
//Javascript Video Player and Table of Contents
var partId = 1;
var videoIndex = 0;
var videoPlayer = $("#video_player");
var videos = new Array(
["Dr. Dive Flies a Helicopter",
"http://www.youtube.com/embed/8t_cEvjpyp0",
"http://www.youtube.com/embed/LbXF4un-b5Y",
"http://www.youtube.com/embed/ec27I2F1y7E",
"http://www.youtube.com/embed/Y4b9lMcPx64",
"http://www.youtube.com/embed/9BqEkbK9sjA",
"http://www.youtube.com/embed/veSPoE3CaTM"],
["California Diving Competition",
"http://www.youtube.com/embed/dUjKW3aN96k"],
["Dr. Dive Diving",
"http://www.youtube.com/embed/s2iZ-raCKq0"],
["Tom Hairabedian playing his harmonica at age 88!",
"http://www.youtube.com/embed/jQZbVY4HCzQ"]);
loadVideo();
for(var i = 0; i < videos.length; i++){
(function(i){
var a = $("<a>").html(videos[i][0]);
//videoIndex = i;//This will break the script
a.css("display","block");
a.css("cursor","pointer");
a.click(function(){
videoPlayer.attr("src", videos[i][1]);
});
$("#contents").append(a);
}(i));
}
$("#back_btn").click(function(){
partId--;
loadVideo();
});
$("#next_btn").click(function(){
partId++;
//videoIndex++;//I add one to...no
loadVideo();
});
function loadVideo(){
videoPlayer.attr("src", videos[videoIndex][partId]);
}
</script>
我只能使用加载的第一个视频上的下一个和后一个按钮。当我使用除第一个视频以外的任何视频并使用下一个和后一个按钮时，它将返回到视频阵列中的第一个视频。
答案 0 :(得分：0)
你有没有尝试过：
<script type="text/javascript">
//Javascript Video Player and Table of Contents
var partId = 1;
var videoIndex = 0;
var videoPlayer = $("#video_player");
var videos = new Array(["Dr. Dive Flies a Helicopter","http://www.youtube.com/embed/8t_cEvjpyp0","http://www.youtube.com/embed/LbXF4un-b5Y","http://www.youtube.com/embed/ec27I2F1y7E","http://www.youtube.com/embed/Y4b9lMcPx64","http://www.youtube.com/embed/9BqEkbK9sjA","http://www.youtube.com/embed/veSPoE3CaTM"],["California Diving Competition","http://www.youtube.com/embed/dUjKW3aN96k"],["Dr. Dive Diving","http://www.youtube.com/embed/s2iZ-raCKq0"],["Tom Hairabedian playing his harmonica at age 88!","http://www.youtube.com/embed/jQZbVY4HCzQ"]);
loadVideo();
for(var i = 0; i < videos.length; i++){
(function(i){
var a = $("<a>").html(videos[i][0]);
//videoIndex = i;//This will break the script
a.css("display","block");
a.css("cursor","pointer");
a.click(function(){
videoPlayer.attr("src", videos[i][1]);
});
$("#contents").append(a);
}(i));
}
$("#back_btn").click(function(){
partId--;
loadVideo();
});
$("#next_btn").click(function(){
partId++;
videoIndex=i++;
loadVideo();
});
function loadVideo(){
videoPlayer.attr("src", videos[videoIndex][partId]);
}
</script>
答案 1 :(得分：0)
下面是另一个稍微强一些的脚本，它可以解决您可能遇到的一些问题。
<iframe height="309" width="500" frameborder="0" id="video_player" src="" allowfullscreen></iframe>
<a href="#" id="back_btn">Back</a>
<a href="#" id="next_btn">Next</a>
<div id="contents"> </div>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
// Keep everything in a single function variable to reduce global impact;
var loadVideo = (function() {
var videos = [["Dr. Dive Flies a Helicopter","http://www.youtube.com/embed/8t_cEvjpyp0","http://www.youtube.com/embed/LbXF4un-b5Y","http://www.youtube.com/embed/ec27I2F1y7E","http://www.youtube.com/embed/Y4b9lMcPx64","http://www.youtube.com/embed/9BqEkbK9sjA","http://www.youtube.com/embed/veSPoE3CaTM"],["California Diving Competition","http://www.youtube.com/embed/dUjKW3aN96k"],["Dr. Dive Diving","http://www.youtube.com/embed/s2iZ-raCKq0"],["Tom Hairabedian playing his harmonica at age 88!","http://www.youtube.com/embed/jQZbVY4HCzQ"]],
$videoPlayer = $("#video_player"), // $ in front of jQuery variables for clarity
currentVideo = 0, i, l,
// Increment video index safely
inc = function() {
var x = currentVideo + 1;
if ( x >= videos.length ) {
x = 0;
}
currentVideo = x;
return currentVideo;
},
// Decrement video index safely
dec = function() {
var x = currentVideo - 1;
if ( x < 0 ) {
x = (videos.length - 1);
}
currentVideo = x;
return currentVideo;
};
for(i = 0, l = videos.length; i < l; i++){
// Use normal anchors, clean up and chain jQuery
$("<a>").
html(videos[i][0]).
css({"display" :"block"}). // Or add a class and use CSS for this.
attr("href", "#"). // Makes links work
data("id", i). // Save our video index number on the link
click(function(e) {
currentVideo = $(this).data("id"); // update current video index
loadVideo(currentVideo);
e.preventDefault; // Prevent default # handling.
}).
appendTo('#contents');
}
// Go back one video
$("#back_btn").click(function(e){
loadVideo( dec() );
e.preventDefault();
});
Go forward one video
$("#next_btn").click(function(e){
loadVideo( inc() );
e.preventDefault();
});
// fills loadVideo variable with reusable function that takes an video number
return function(videoNum) {
var v = videoNum || currentVideo;
$videoPlayer.attr("src", videos[v][1]);
};
})();
loadVideo(); // Make it go and load video.
</script>