Question

我有一个数据，例如播放时间，例如"time_stamp": [ "2-5", "6-10" ]，我想根据接连提供的剪辑范围来播放相同的源。例如如果我播放视频，首先视频将从2秒开始，并在5秒钟处停止。然后再次从6秒开始。并在10秒钟后停止使用同一来源。

在这里，我在按钮中使用了自定义属性data-play-interval="2-5,6-10"，并从那里在函数jumpTime(start, stop)中发送和处理值。

我希望，我已正确解释了我的问题陈述。

谢谢。

var vid = $("#vid").get(0);


$(document).on("click", "#start-play", function() {
  var clip_play_time = $(this).data("play-interval");
  var new_play_time = clip_play_time.split(",");


  //alert(new_play_time);
  segments = [];
  for (var i = 0; i < new_play_time.length; i++) {
    segments.push({
      "from": (new_play_time[i].split("-"))[0],
      "to": (new_play_time[i].split("-"))[1]
    });
  }



  if (vid.paused) {
    vid.load();
    jumpTime(segments[0].from, segments[0].to);

  } else
    vid.pause();

});


function jumpTime(start, stop) {
  vid.currentTime = start;
  vid.play()

  vid.addEventListener("timeupdate", function() {
    if (vid.currentTime >= stop) {
      vid.pause();
    }
  }, false);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button id="start-play" data-play-interval="2-5,6-10">
Play 2-5,6-10
</button>
</div>
<br>


<video width="320" height="240" controls="" id="vid">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

HTML5视频：一个视频一个接一个地播放多个时间戳

0 个答案: