HTML5 Video Streaming: Media Source API

Streaming Video using HTML5 is now very simple, Media Source API gives streaming video as chunks. playing video with chunks of data is now possible.

This API allows to generate media streams, using  javascript streaming is enabled by extending HMTLElement.

<video id="video" src="" height="300" width="300">
      Video element is not supported in your browser

window.MediaSource = window.MediaSource || window.WebKitMediaSource;

var mediasource = new MediaSource();

var video = document.getElementById('video');
video.src = window.URL.createObjectURL(ms);

mediasource.addEventListener('webkitsourceopen', function(e) {
  var sourceBuffer = mediasource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
//start playing after video header recieved(i.e; first chunk)
//call media.endOfStream(); before appending last chunk
}, false);

playing large volume media files is a bit hard, just make them as chunks and stream with video element. Remember that Video file header contains vital information to play video, this should be necessary to seek and play stream video. if you want to play video from a segment you should first load video fie header then load the segment data to stream your data.

you start playing the stream after receiving header only.

Media Source API now works only chrome( set --enable-media-source flag ).
Media Source Extensions specification changed, changes expected to be made in next release.

Share this

Related Posts

Next Post »


June 6, 2015 at 2:39 PM delete

Hi friends, This is Victoria from Chennai. I am a technology freak. I have read your blog. It was really a wonderful article and I was really impressed by reading this blog. Thanks for sharing this informative blog. I did HTML Training in Chennai at FITA academy, Its really useful for me to make a bright future.

November 13, 2017 at 9:46 PM delete

Thanks For sharing this Superb article.I use this Article to show my assignment in is useful For me Great Work.
Streaming De Vídeo Ilimitado