html play a video that is made of lots of queued small videos

501 views Asked by At

How can I manage a video that is made of lots of small videos parts? For instance the original video is split in 1s videos that are each available at different byte rate, so that I can chose each part according to the current bandwidth. Or the original video is a 360 video, and is split in 1s chunks that are available with better quality at different regions, so that I can stream the chunk corresponding to where the user is currently looking at.

It seems that MPEG-DASH players are solving this problem for byte-rate adaption, even though they probably do more.

It sounds not to complicated to do this with a bunch of html5 videos + javascript in desktop, with being careful with what is streamed when and handling transitions. However, on mobile, I need a user interaction to load a video and play it. But I don't want the user to tap his phone every second...

Ideally, the final things would have an api very similar to the html5 video one, with the extra possibility to chose the streaming source at regular intervals. It's very important to me that it works on mobile.

Lot of thanks!

1

There are 1 answers

0
Svetlin Mladenov On

Yes, MPEG-DASH and HLS are solving this problem among others.

DASH and HLS players use the new HTML5 Media Source Extensions API (MSE) to play multiple video fragments as if they were just one single file.

Mobile is a problem. MSE works in Chrome for Android but be aware of built-in browsers that come with most Android phones. They are notoriously buggy and lacking in functionality.

Unfortunately MSE doesn't work on iOS. The only thing that works on iOS is HLS.

Most people go with HLS because it's so wide spread and well supported on iOS devices. HLS is also supported on Android although it could be buggy especially on some devices (As you know virtually all hardware manufactures are also manufacturing android phones and who knows what hardware their are putting in their phones. And when it comes to set top boxes things are even worse). For desktop browser a javascript HLS player is used like hls.js (open source) or Viblast (commercial).

Some streaming servers package the video stream in multiple formats - HLS, MPEG-DASH, rtmp so a fallback mechanism could be implemented: if HLS is supported use HLS, then use MPEG-DASH if supported or rtmp for really old browsers.

A DIY solution is fun to do but you should be prepared to invest possibly a lot of time before you make it work on most platforms (mobile and desktop).