一次播放多個 HTML5 視頻片段

Question

我正在嘗試編寫一個 function 它將獲取一個 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

我建議你在視頻上放一個唯一的 id，這里我選擇 vpos-1/2/3/4/... 並從請求到結束顯示視頻：

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

它會停止視頻並保存 memory

Answer 2

timeupdate事件會觸發很多次，因此它可能會在this.currentTime >= end檢查中觸發多次。

不要過多地更改您的代碼，您可能希望設置一個播放狀態/var，然后在canplay事件更改時間戳然后播放，這反過來會觸發一個搜索事件，然后您可以將視頻設置為timeupdate播放，然后在seeked ，檢查您的時間加上正在播放的視頻.. 對於最后一個視頻，您需要檢查ended的事件，因為它不會進入您的檢查this.currentTime >= end因為 end 是 +1 秒。

然后將事件函數從播放器 class 中分離出來，id 將使用一個數組並觀察它的變化，然后通過將 function 推送到數組/堆棧，然后您可以在 ZC1C425268E6838941AB5074C7 每次調用時在 ZC1C425268E6838941AB5074C7視頻長度，假設您可以通過其他方式進行。

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