通過jQuery的html5視頻更改src標簽

Question

我知道我錯過了（mp4，ogv），但是我不知道如何在函數中添加它們。

• 我的html5視頻僅在Chrome和Firefox（webm）上有效。 不幸的是Safari和IE無法正常工作。
• 如何實現其他擴展（mp4，ogv）？

 $.fn.videoLoop = function (options) { var video = $(this), videoEl = video.get(0), selVideoIdx = 0; options = options || {}; var playlist = options.playlist || [], poster = options.poster || "http://placehold.it/1024x768/FFFFFF/FFFFFF"; if (playlist.length > 1) { video.attr('src', playlist[selVideoIdx % playlist.length]); video.attr('poster', poster); video.attr('autoload', true); selVideoIdx++; video.on('loadedmetadata', function () { videoEl.currentTime = 0.5; videoEl.play(); }).bind('ended', function () { videoEl.src = playlist[selVideoIdx % playlist.length]; videoEl.loop = true; videoEl.load(); }); } }; $(function () { $('#start').videoLoop({ 'playlist' : [ '../assets/video-start/HOMEPAGE_Walk_In_v01_(Converted).webm', '../assets/video-loop/HOMEPAGE_Loop_v01_(Converted).webm'], 'poster' : "../assets/video-loop/Screen-Shot.jpg" }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="video-start target"> <video id="start"> </video> </div> 

Answer 1

那這樣的事呢？ 為了處理多種視頻格式，我在視頻obj中使用了一系列媒體。

 (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 = 'w3schools'; video1.media = [{'format':'video/mp4','src':'http://www.w3schools.com/html/mov_bbb.mp4'},{'format':'video/ogg','src':'http://www.w3schools.com/html/mov_bbb.ogg'}]; var video2 = {}; video2.title = 'w3.org'; video2.media = [{'format':'video/mp4','src':'http://media.w3.org/2010/05/sintel/trailer.mp4'},{'format':'video/ogg','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>