CODEWITHSUNDEEP
javascriptjqueryhtml5-video
provance
provance

Reputation: 927

how to play a video from a specific startTime to a specific endTime

<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 ?

Upvotes: 1

Views: 608

Answers (1)

Yusuf İlker Oğuz
Yusuf İlker Oğuz

Reputation: 179

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

Upvotes: 2

Related Questions