これを理解しようとするのはあまり運がありませんでした。
次のようなビデオを含むビデオタグがあります。
<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 を使用して、リスト項目をループしようとします (このリストは長くても短くてもかまいませんが、ユーザーによって制御されます)、それらをビデオ自体に挿入すると、これで問題なく動作します:
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 つすべてをループした後にビデオを停止することです。一度。
どんな助けでも素晴らしいでしょう。