如何在视频导航上增加视频索引
How do I increment videoIndex on my video navigation?
我有一个视频播放器,我试图用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>
我只能在加载的第一个视频上使用下一个和后退按钮。当我在第一个视频以外的任何视频上使用下一个和后退按钮时,它将返回到视频数组中的第一个视频。
你试过吗:
<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>
下面是
另一个稍微健壮的脚本,它清理了您可能遇到的一些问题。
<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>
相关文章:
- JQuery使计数器每次更改时都会增加
- 视频HTML没有'无法在Internet Explorer 11上工作
- 播放当前视频时如何停止其他视频?JavaScript
- 使用Facebook live API创建实时视频对象时的隐私设置
- Brightcove获取/显示HTML中的当前视频标题和描述
- 如何增加同时按键总数
- 如何使用css动画从中心增加边界线
- Twilio-显示所有连接参与者的远程参与者视频
- WebRTC视频聊天可以在FF中使用,但不能在Chrome中使用
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- 如何检查用户在html5视频播放器中观看了完整的视频
- Fullpage.js-视频+背景在同一部分
- html5视频中的Youtube类型注释
- 角度p2p视频聊天-远程流是黑视频
- tiltSlider播放/暂停视频元素(如果li有当前类)
- 可以在响应时隐藏iphone上的“播放”按钮以进行视频播放
- Twilio视频:如何增加视频大小
- 如何在视频导航上增加视频索引
- 增加/减少视频元素上的音频,通过jQuery Waypoints触发
- 添加选项以增加youtube视频的低音