CODEWITHSUNDEEP
html
Douglas Banks
Douglas Banks

Reputation: 77

How to fix source of pause range that changes video in HTML

When I pause a video between 2-4 secs, it'll change the video without any issues. But when I want to add a specific video src to change it only if it's that video, it doesn't work.

So how would I fix the 'something-skippable.mkv' portion?

vid.addEventListener('pause', (e) => { if (e.currentTarget.src === 'something-skippable.mkv' && e.currentTarget.currentTime > 2 && e.currentTarget.currentTime < 4) { vid.src = 'something-else.mkv'; } });

Upvotes: 0

Views: 52

Answers (1)

Sully
Sully

Reputation: 14943

Read Dynamically changing source element

You can do something like

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'something.mkv');

video.appendChild(source);
video.play();

To update the video source 

video.pause();

source.setAttribute('src', 'something-else.mkv'); 

video.load();
video.play();

Credit and other approaches

Edit:

Here is a complete example

HTML

<video id="video" controls="true">
</video>

JS

// Initial Load
var vid = document.getElementById('video');
var source = document.createElement('source');
var initialVideoSourceUrl = 'https://gitlab.la-bw.de/pub/ingestlist/raw/f49935f4e2201c78c7a3bcf4e86ce9eae6a21b18/test/test-files/video/SampleVideo_1280x720_1mb.mkv' ;

source.setAttribute('src', initialVideoSourceUrl);

vid.appendChild(source);
vid.play();

vid.addEventListener('pause', (e) => {
  if (e.target.currentSrc === initialVideoSourceUrl && e.currentTarget.currentTime > 2 && e.currentTarget.currentTime < 4) { 
    vid.pause();
    source.setAttribute('src', 'https://gitlab.freedesktop.org/thiblahute/gst-plugins-base/raw/85a7b8f5622536de9b888f58c7c6ca1b15834b78/tests/files/test.mkv?inline=false'); 
    vid.load();
    vid.play();
  } 
});

JSFiddle

Upvotes: 1

Related Questions