根据此功能,如何才能播放第一个视频? 我不再需要第二个这个功能了!
此视频最初是为了播放2个视频而创建的,其中第二个视频正在循环播放。真的很聪明,但它给了我在ie9上的黑色闪光,我无法解决。
(function($)
{$.fn.videoLoop = function (options) {
function changeVideoSrc(vidObj,vidEl){
vidEl.html("");
vidObj.media.forEach(function(obj){
console.log(obj);
vidEl.append($("<source>").attr("src",obj.src).attr("type",obj.format));
});
}
var video = this,
videoEl = video[0],
selVideoIdx = 0;
options = options || {};
var playlist = options.playlist || [],
poster = options.poster || "http://placehold.it/1024x768/FFFFFF/FFFFFF";
if (playlist.length > 1) {
var firstvid = playlist[selVideoIdx % playlist.length];
changeVideoSrc(firstvid,video);
video.attr('poster', poster);
video.attr('autoload', true);
video.attr('autoplay', true);
selVideoIdx++;
video.on('loadedmetadata', function () {
videoEl.currentTime = 0.5;
videoEl.play();
}).bind('ended', function () {
var currentvid = playlist[selVideoIdx % playlist.length];
changeVideoSrc(currentvid,video);
videoEl.loop = true;
videoEl.load();
selVideoIdx++;
});
}
};
var video1 = {};
video1.title = 'FIRST';
video1.media = [{'format':'video/mp4','src':'http://www.w3schools.com/html/mov_bbb.mp4'},{'format':'video/ogv','src':'http://www.w3schools.com/html/mov_bbb.ogv'}];
var video2 = {};
video2.title = 'LOOP';
video2.media = [{'format':'video/mp4','src':'http://media.w3.org/2010/05/sintel/trailer.mp4'},{'format':'video/ogv','src':'http://media.w3.org/2010/05/sintel/trailer.ogv'}];
var data = {};
data.playlist = [video1,video2];
data.poster = "http://placehold.it/1024x768/000000/FFFFFF"
$('#start').videoLoop(data);
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-start target">
<video id="start" width="400" height="300" controls>
Your browser does not support the video tag.
</video>
</div>
答案 0 :(得分:0)
最简单的解决方案是修改两行代码
if (playlist.length > 1) {
应该是
if (playlist.length > 0) {
和
data.playlist = [video1,video2];
可以更改,以便不将两个值传递给数组,而只传递一个!
data.playlist = [video1];