html5视频通过jquery更改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中使用了一系列媒体，以便处理多种视频格式。

＆＃13;

＆＃13;

(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));

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;