jQuery: 视频函数变量使用不正确

Question

正在播放视频，但我的变量的使用不起作用。

第一个视频只播放一次，当停止时第二个视频开始。
第二个视频开始循环播放。
视频应该流畅播放，没有间隙和跳跃。

我的演示：http://jsfiddle.net/654geqvp/1/

var start = [
    "http://praegnanz.de/html5video/player/video_SD.webm",
    "http://praegnanz.de/html5video/player/video_SD.webm",
    "http://praegnanz.de/html5video/player/video_SD.mp4"];

var loop = [
    "http://broken-links.com/tests/media/BigBuck.webm",
    "http://broken-links.com/tests/media/BigBuck.theora.ogv",
    "http://broken-links.com/tests/media/BigBuck.m4v"];

    var curSrc = 0;
    $(function() {
      $('#start').attr(start, start[curSrc % start.length]);
      curSrc++;
      var video = $('#start').get(0);

      $('#start').on('loadedmetadata', function() {
        video.currentTime = 0.01;
        video.play();
      }).on('ended', function() {
        //console.log('ended');
        video.loop = loop[curSrc % loop.length];
        video.load();
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="start" style="width:100%;"></video>

Answer 1

我想通了，我更改了一些变量名。您需要将视频的 loop 属性设置为 true。您可以根据需要删除 controls 属性。我将原版转换为 jQuery 插件。

要消除转换视频时的黑色闪光，您可以将视频元素的 poster 属性设置为第二个视频的第一帧。

$.fn.videoLoop = function(options) {
  var video = $(this),
    videoEl = video.get(0),
    selVideoIdx = 0;

  options = options || {};

  var playlist = options.playlist || [],
    // Use a white background by default if a poster is not provided. This
    // should prevent the transition from showing a black screen. If possible,
    // use the first frame of the looping video or a solid color to match
    // the backdrop of the video.
    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': [
      '../video-start/Homepage_video_ref_v01.mp4',
      '../video-loop/7_Sec_Loop_v01.mp4'
    ],
    'poster': "http://placehold.it/1024x768/6DBBD2/6DBBD2"
  });
});

video {
  width: 100%;
  background: #53abc5;
}

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

jQuery: 视频函数变量使用不正确

jQuery: Incorrect use of variables on video function

javascript

video

jquery