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

jQuery: Incorrect use of variables on video function

本文关键字：不正确 变量 视频 函数 jQuery      更新时间：2023-09-26

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

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

我的演示：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>

我想

通了，我更改了一些变量名称。您需要将视频上的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>

相关文章：