1
<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();
});

the above works fine - i.e. video starts from x
now I need to add endTime - something like this:

<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`
});

how to set the endTime and play the video from x to y ?

provance
  • 877
  • 6
  • 10

1 Answers1

2

Start HTML5 video at a particular position when loading?

You can check this post, i am adding an example below:

<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!: Also You can add the url parameter:

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();
});
Yusuf İlker Oğuz
  • 164
  • 6