如何播放从特定开始时间到特定结束时间的视频

Question

<video id='vsingle' src='test.mp4' poster='poster.jpg' controls></video>

<p class='story' data-start=5>lorem ipsum</p>
<p class='story' data-start=10>dolor sit</p>

var vid = document.getElementById("vsingle");

$('.story').on('click', function(){
  let x = $(this).attr('data-start');
  vid.currentTime=x;
  vid.play();
});

以上工作正常 - IE视频从x
开始 现在，我需要添加endtime - 类似的内容：

<p class='story' data-start=5 data-end=10>lorem ipsum</p>

$('.story').on('click', function(){
  let x = $(this).attr('data-start');
  let y = $(this).attr('data-end');
  vid.currentTime=x;
  vid.endTime = y;
  vid.play();  // from `x` to `y`
});

如何设置endime并从x播放视频到y ？

Answer 1

加载时在特定位置启动 HTML5 视频？

您可以查看这篇文章，我在下面添加了一个示例：

<video id='vsingle' src='https://assets.mixkit.co/videos/preview/mixkit-girl-crying-and-screaming-heartbroken-42253-large.mp4' poster='poster.jpg' controls></video>

<p class='story' data-start=5>lorem ipsum</p>
<p class='story' data-start=10>dolor sit</p>

const vid = document.querySelector("#vsingle");

$('.story').on('click', function(){
  let x = $(this).attr('data-start');
  let y = $(this).attr('data-start');

  vid.currentTime=x;
  vid.play();

  video.addEventListener("progress", function(){
  if(video.currentTime >= y){
    video.pause();  
  }
}, false);
});

!Alternate!：您还可以添加 url 参数：

const vid = document.querySelector("#vsingle");
const url = vid.getAttribute('src')

$('.story').on('click', function(){
  let x = $(this).attr('data-start');
  let y = $(this).attr('data-end');

  vid.setAttribute('src', `${url}#t=${x},${y}`);
  vid.play();
});