jQuery 视频没有循环播放
jQuery video not playing in loop
功能:
jPlayer 播放一个视频列表,每个视频都有不同的mp4 名称。因此,在第一个视频播放完毕后,jPlayer 将播放第二个视频并继续播放视频直到到达视频列表中的最后一个视频,之后它将重复并再次播放第一个视频,重复第一个视频到最后一个视频。
因此循环播放
已经做了什么:
- 视频数组包含视频列表
- jPlayer方法播放视频
问题
在 jPlayer 播放完视频列表中的全部视频后:video_01 到 video_0N,视频停止并且不会循环回到第一个视频以重复播放列表。其次,播放视频列表的最后一个视频时显示错误消息:
Error msg: Uncaught TypeError: Cannot read property 'split' of undefined jquery.jplayer.min.js:66
因此,在这一点上,我能否得到一些帮助来纠正以下问题,并告知导致此错误的可能原因是什么,jPlayer 视频不会从列表中的第一个视频重播。
谢谢。
var videoList = ["lib/video/Video_01.mp4", "lib/video/Video_02.mp4", "lib/video/Video_03.mp4", "lib/video/Video_04.mp4", "lib/video/Video_05.mp4", "lib/video/Video_06.mp4", "lib/video/Video_07.mp4", "lib/video/Video_08.mp4", "lib/video/Video_09.mp4", "lib/video/Video_10.mp4"];
var videoIndex = 0;
$(function() {
//Video Player for First page & to play subsequent videos after 1st video is completed
$("#Start_Video").jPlayer({
ready: function() {
$("#Start_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
ended: function() {
videoIndex++;
if (videoIndex > videoList.length) {
videoIndex = 0;
}
$("#Start_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
swfPath: "javascript",
supplied: "webmv, ogv, m4v",
size: {
width: 1920,
height: 1080
}
});
$("#HBOStart_Video").show();
});
<script src="javascript/jquery-1.11.3.min.js"></script>
<script src="javascript/jquery-ui-1.10.3.min.js"></script>
<script src="javascript/jplayer.playlist.min.js"></script>
<script src="javascript/jquery.jplayer.min.js"></script>
<div id="StartPage" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">
<div id="Start_Video" style="position:absolute; z-index:1;"></div>
</div>
我认为你正在查看这里的索引:
ended: function() {
videoIndex++;
if (videoIndex > videoList.length) {
videoIndex = 0;
}
示例:videoList[10] 索引为 {0,1,2,...,9} 因此最大值 "videoIndex" 可以取 9,但 videoList.length returns 10 所以 if(videoIndex > videoList.length) 与 if(videoIndex > 10) 相同,它允许 "videoIndex" 为 10... (10 > 10 false)
将您的 if 更改为:
//(videoIndex == 10 ? videoIndex = 0)
//the max value of videoIndex should be n-1, because the array is 0 based.
if (videoIndex >= videoList.length) {
videoIndex = 0;
}
错误:
Error msg: Uncaught TypeError: Cannot read property 'split' of undefined jquery.jplayer.min.js:66
发生是因为您试图拆分 videoList[10] 的内容...(videoList 定义了 10 个视频名称字符串:videoList[10])
功能: jPlayer 播放一个视频列表,每个视频都有不同的mp4 名称。因此,在第一个视频播放完毕后,jPlayer 将播放第二个视频并继续播放视频直到到达视频列表中的最后一个视频,之后它将重复并再次播放第一个视频,重复第一个视频到最后一个视频。
因此循环播放
已经做了什么:
- 视频数组包含视频列表
- jPlayer方法播放视频
问题
在 jPlayer 播放完视频列表中的全部视频后:video_01 到 video_0N,视频停止并且不会循环回到第一个视频以重复播放列表。其次,播放视频列表的最后一个视频时显示错误消息:
Error msg: Uncaught TypeError: Cannot read property 'split' of undefined jquery.jplayer.min.js:66
因此,在这一点上,我能否得到一些帮助来纠正以下问题,并告知导致此错误的可能原因是什么,jPlayer 视频不会从列表中的第一个视频重播。
谢谢。
var videoList = ["lib/video/Video_01.mp4", "lib/video/Video_02.mp4", "lib/video/Video_03.mp4", "lib/video/Video_04.mp4", "lib/video/Video_05.mp4", "lib/video/Video_06.mp4", "lib/video/Video_07.mp4", "lib/video/Video_08.mp4", "lib/video/Video_09.mp4", "lib/video/Video_10.mp4"];
var videoIndex = 0;
$(function() {
//Video Player for First page & to play subsequent videos after 1st video is completed
$("#Start_Video").jPlayer({
ready: function() {
$("#Start_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
ended: function() {
videoIndex++;
if (videoIndex > videoList.length) {
videoIndex = 0;
}
$("#Start_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
swfPath: "javascript",
supplied: "webmv, ogv, m4v",
size: {
width: 1920,
height: 1080
}
});
$("#HBOStart_Video").show();
});
<script src="javascript/jquery-1.11.3.min.js"></script>
<script src="javascript/jquery-ui-1.10.3.min.js"></script>
<script src="javascript/jplayer.playlist.min.js"></script>
<script src="javascript/jquery.jplayer.min.js"></script>
<div id="StartPage" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">
<div id="Start_Video" style="position:absolute; z-index:1;"></div>
</div>
我认为你正在查看这里的索引:
ended: function() {
videoIndex++;
if (videoIndex > videoList.length) {
videoIndex = 0;
}
示例:videoList[10] 索引为 {0,1,2,...,9} 因此最大值 "videoIndex" 可以取 9,但 videoList.length returns 10 所以 if(videoIndex > videoList.length) 与 if(videoIndex > 10) 相同,它允许 "videoIndex" 为 10... (10 > 10 false)
将您的 if 更改为:
//(videoIndex == 10 ? videoIndex = 0)
//the max value of videoIndex should be n-1, because the array is 0 based.
if (videoIndex >= videoList.length) {
videoIndex = 0;
}
错误:
Error msg: Uncaught TypeError: Cannot read property 'split' of undefined jquery.jplayer.min.js:66
发生是因为您试图拆分 videoList[10] 的内容...(videoList 定义了 10 个视频名称字符串:videoList[10])