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