一次播放多个片段的HTML5视频

Question

我正在尝试编写一个函数，该函数将获取div的id并播放给定的视频，例如，从2/10一直播放到3/10，然后返回一个事件，这样我就可以做一些其他的事情。

到目前为止，我还不是很聪明，视频的持续时间对我来说也不是很好，任何帮助都很感谢。我已经安装了jQuery。

自上次以来有了一些改进。更新后，接下来只需要监听程序工作即可。

var finished_event = new Event('finished');

$(document).ready(function(){

    class Player {

        constructor(pos, vid, part, parts){
            this.pos = pos;
            this.vid = vid;
            this.part = part;
            this.parts = parts;
        }

        start(){
            var it = this;

            var html = '<video class="video-fit" controls>';
            html += '<source src="';
            html += it.vid;
            html += '" type="video/mp4">';
            html += '</video>';
            $(it.pos).html(html);

            var video = $(it.pos + ' video')[0];

            video.addEventListener('loadeddata', function(){

              var dur = video.duration;
              var fra = dur / it.parts;
              var beg = it.part * fra;
              var end = it.part * (fra + 1);
              video.currentTime = beg;
              video.play();

              video.addEventListener('timeupdate', function() {

                 if (video.currentTime >= end) {
                   video.pause();
                   this.dispatchEvent(finished_event);
                 }

              }, false);

            }, false);

            return it;
        }
    }

  $('body').click(function(){
    let player_1 = new Player('#pos-1', 'videos/576p.mp4', 5, 10);
    player_1.start();
    let player_2 = new Player('#pos-2', 'videos/576p.mp4', 5, 10);
    player_2.start();
    let player_3 = new Player('#pos-3', 'videos/576p.mp4', 5, 10);
    player_3.start();
    let player_4 = new Player('#pos-4', 'videos/576p.mp4', 5, 10);
    player_4.start();

    //.addEventListener('finished', function(){ console.log('Finished'); }, false)

  });

});

Answer 1

timeupdate事件会触发很多次，因此它可能会在this.currentTime >= end检查中触发多次。

如果不想过多地更改代码，您可能希望设置一个播放状态/var，然后在canplay事件上更改时间戳，然后播放，这将触发一个seeked事件，然后您可以将视频设置为正在播放，然后在timeupdate上，检查您的计时以及视频是否正在播放。对于最后一个视频，你需要检查ended事件，因为它不会进入你的check this.currentTime >= end，因为end是+1秒。

然后，为了将事件函数从播放器类中分离出来，id将使用一个数组并观察它的变化，然后通过将一个函数推送到数组/堆栈，您可以在每次调用该函数时检查它是否与视频长度匹配，假设您可以用其他方法进行检查。

​

(function () {
  let video =
    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/twitter_cat.mp4';

  let videos = [
    { id: '#pos-1', video, part: 1, parts: 10 },
    { id: '#pos-2', video, part: 2, parts: 10 },
    { id: '#pos-3', video, part: 3, parts: 10 },
    { id: '#pos-4', video, part: 4, parts: 10 },
  ];

  const playqueue = [];
  Object.defineProperty(playqueue, 'push', {
    value: function (...args) {
      var arr = Array.prototype.push.apply(this, args)
      if (typeof args[0] === 'function') args[0]();
      return arr;
    }
  });

  function finished_event() {
    if (playqueue.length === videos.length) {
      console.log('Do something, all videos have stopped playing');
    }
  }

  function video_finished_event(player) {
    console.log(
      'Do something, ' + JSON.stringify(player) + ' has stopped playing'
    );

    playqueue.push(finished_event);
  }

  class Player {
    constructor(pos, vid, part, parts) {
      this.pos = pos;
      this.vid = vid;
      this.part = part;
      this.parts = parts;
    }

    start() {
      var it = this;

      var html = '<video class="video-fit" data-vid="' + it.pos + '" controls>';
      html += '<source src="';
      html += it.vid;
      html += '" type="video/mp4">';
      html += '</video>';
      $(it.pos).html(html);

      var video = $('[data-vid="' + it.pos + '"]')[0];

      video.addEventListener(
        'loadeddata',
        function () {
          var fra = video.duration / it.parts;
          var beg = it.part * fra;
          var end = it.part * (fra + 1);

          video.addEventListener('canplay', function () {
            if (!this.playing) {
              this.currentTime = beg;
              this.play();
            }
          });

          video.addEventListener('seeked', function () {
            this.playing = true;
          });

          video.addEventListener('timeupdate', function () {
            if (this.playing && this.currentTime >= end) {
              this.pause();
              this.playing = false;
              video_finished_event(it);
            }
          });

          video.addEventListener('ended', function () {
            if (this.playing) {
              this.pause();
              this.playing = false;
              video_finished_event(it);
            }
          })
        },
        false
      );

      return it;
    }
  }

  videos.forEach(video => {
    video.player = new Player(video.id, video.video, video.part, video.parts);
    video.player.start();
  });
})();

.videos div {
  display: inline-block;
  width: calc(25vw - 15px);
  height: 100%;
}

.videos div video {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="videos">
  <div id="pos-1"></div>
  <div id="pos-2"></div>
  <div id="pos-3"></div>
  <div id="pos-4"></div>
</div>

​

Answer 2

我建议你在视频上放一个唯一的id，这里我选择vpos-1/2/3/4/...我展示了从beg到end的视频：

var html = '<video ' + 'id="v' + it.pos + '" class="video-fit">';
            html += '<source src="';
            html += it.vid;
            html += '" type="video/mp4">';
            html += '</video>';
            $(it.pos).html(html);

var video = document.getElementById('v' + it.pos);

$(video).bind('timeupdate', function() {
    if(video.currentTime > end){
       video.pause();
    }
});

$(video).on('play', function() {
    video.playbackRate = 1.0;
    //calcul the value of beg
    video.currentTime = beg;
    video.play();//suppress if you have autoplay
});

$(video).bind('ended', function() {
    // nothing yet      
});

如果您想要自动播放和/或显示控件，我建议您添加

controls="controls" autoplay

标记video

如果你想删除视频:只需执行src=''

它会停止视频并节省内存