1
嘗試解決這個問題並沒有太多好運。使用javascript循環的HTML5視頻
我有像這樣一個視頻的視頻標籤:
<video id="video" preload="auto" tabindex="0" controls poster="img/layout/Untitled-1.jpg">
<source type="video/mp4" src="video/1.mp4" >
Sorry, your browser does not support HTML5 audio.
</video>
<ul id="playlist">
<li class="active"><a href="video/1.mp4">GetFighted</a></li>
<li><a href="video/2.mp4">ThatGirlPossessed</a></li>
<li><a href="video/3.mp4">WhiteDevil</a></li>
</ul>
而且使用JavaScript和jQuery IM通過列表項試圖循環(這個列表可以更長或更短這將是用戶控制)並把它們放到視頻本身,這正常工作與此:
jQuery(document).ready(function($) {
var video;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
video = $('video');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length;
video[0].volume = .50;
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, video[0]);
});
video[0].addEventListener('ended',function(e){
$('#video').animate({opacity: 0}, 500);
setTimeout(function(){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
console.log('here 1');
} else {
link = playlist.find('a')[current];
console.log('here');
}
$('#video').animate({opacity: 1}, 500);
run($(link),video[0]);
},500);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
video[0].load();
video[0].play();
}
});
(此代碼是從其他來源作爲參考,我忘了在哪裏)。然而,我在做的麻煩是停止視頻,一旦它已經遍佈全部3.控制檯日誌'here 1'會觸發一次所有3個視頻都播放過,但我無法計算一旦它播放完成後如何停止視頻一旦。
任何幫助將是太棒了。
超級明星之前
只需加入!非常感謝。 (Y) – 2013-03-20 12:45:31