0

I want to change the video source after specific duration.

I have for instance 3 video each 60 Sec's Long. I want to start video1 from 15 sec and then after 30 sec i want to start video2 and then after 45 sec video3 till end
Example
video1 start time = 15 sec and end time = 30
video2 start time = 31 sec and end time = 45
video3 start time = 46 sec and end time = 60

I can handle the start and end time of video by using Media Fragment URI

<video class="v" controls src="vid1.mp4#t=15,30"></video>

https://www.w3.org/TR/media-frags/#standardisation-URI-fragments

http://www.annodex.net/~silvia/itext/mediafrag.html#t=40

I have Tried the JavaScript solutions which gives a huge break to whole page while loading the 2nd video

Am expecting there must be some clean solution which can change the video source smoothly

Yousaf Ali
  • 89
  • 1
  • 4
  • as the videos are small I would either use ffmpeg to cut them together into one video. If you can't do that, then try loading them as blobs -https://stackoverflow.com/questions/18251632/another-force-chrome-to-fully-buffer-mp4-video/18294706#18294706 - and swap the blob source (will be quicker than buffering) or load them (blobs) into three seperate video elements and swap them – Offbeatmammal Feb 08 '19 at 22:50

1 Answers1

0

One solution is to have three separate video elements in your page and preload the videos which are not playing at the start, and play them but immediately pause them.

Each video element is in the same place on the page, i.e. they overlay each other, but you only make one visible at a time.

You can then switch the video which is visible and start it playing, pausing the one which was previously playing and making it invisible.

This technique is used by some OTT video services to mix advertisement breaks with the main video.

Mick
  • 24,231
  • 1
  • 54
  • 120