我有一个视频播放器,我想用 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>
我只能在加载的第一个视频上使用下一个和后退按钮。当我在第一个视频以外的任何视频上并使用下一个和后退按钮时,它将返回到视频阵列中的第一个视频。