时间戳

首页 > 解决方案 > 一次播放多个 HTML5 视频

javascript - 一次播放多个 HTML5 视频

问题描述

我正在尝试编写一个函数，该函数将获取 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)

  });

});

标签： javascriptjqueryeventsvideo

解决方案

我建议你在视频上放一个唯一的 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=''

它会停止视频并节省内存

推荐阅读