<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(); }); lo anterior funciona bien, es decir, el video comienza desde x
ahora necesito agregar endTime , algo como esto:
<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` }); ¿Cómo configurar endTime y reproducir el video de x a y ?
¿Iniciar video HTML5 en una posición particular al cargar?
Puede consultar esta publicación, estoy agregando un ejemplo a continuación:
<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); });!¡Alterno! : También puede agregar el parámetro de 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(); });