Question

有没有办法定义视频的一部分与video.js一起循环？我想用开始和结束拇指进行某种范围控制，然后选择范围循环。

Answer 1

您可以使用timeupdate事件检查视频currentTime以创建基本循环，如下例所示（请参阅https://jsfiddle.net/o32bku6x/处的现场直播）

另见loop a html5 video in specific timline with js。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://vjs.zencdn.net/5.6.0/video.js"></script>
        <link href="https://vjs.zencdn.net/5.6.0/video-js.css" rel="stylesheet" />  
    </head>
    <body>

        <video id="vid" controls="controls" class="video-js">
            <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        </video>

        Start: <input type="text" size="5" id="loopStart" value="10" />
        End:   <input type="text" size="5" id="loopEnd"   value="15" />
        Loop:  <input type="checkbox" checked="checked" id="loopEnabled" />

        <script>            
            var vid = document.getElementById("vid");
            vid.addEventListener('timeupdate', timeupdate, false);

            function timeupdate() {
                var loopStart = parseFloat(document.getElementById('loopStart').value);
                var loopEnd = parseFloat(document.getElementById('loopEnd').value);
                var loopEnabled = document.getElementById('loopEnabled').checked;

                if(loopEnabled){
                    if (vid.currentTime < loopStart || vid.currentTime >= loopEnd ) {
                        vid.currentTime = loopStart;
                    }
                }
            }
        </script>

    </body>
</html>

或者，您可以使用https://github.com/phhu/videojs-abloop等插件，为播放器添加循环控件。请参阅https://cdn.rawgit.com/phhu/videojs-abloop/master/sample/basic.html

上的示例

Answer 2

我必须做同样的事情。 @phhu很近，但是他/她的建议有几个错误。

当我将脚本调整为这样时，它起作用了：

<script>            
    videojs('vid').ready(function () {
    this.on('timeupdate', onVideoTimeupdate );
  });
  
  function onVideoTimeupdate() {
    var loopStart = parseFloat(document.getElementById('loopStart').value);
    var loopEnd = parseFloat(document.getElementById('loopEnd').value);
    var loopEnabled = document.getElementById('loopEnabled').checked;

    if(loopEnabled){
      if (this.currentTime() < loopStart || this.currentTime() >= loopEnd ) {
        this.currentTime( loopStart );
      }
    }
  }

</script>

更新

Phhu的一个很好的评论（和Fiddle）使我注意到一个错误。

这是工作中的小提琴：https://jsfiddle.net/oLf7s15j/

我也更新了代码。问题出在initialization of the video-js element。

使用video.js设置循环范围

2 个答案: