Video streaming without plug-ins or special servers

  • Article

I’ve been covering mostly canvas so far here, but I recently finished a sample and article in the media area. It’s on how to create a simple MPEG-DASH streaming player. The cool thing about DASH is that you don’t need plug-ins on your client, and you serve the content from a standard issue HTTP server. No fancy server required.

The code uses the Media Source Extension API, and DASH files created with MP4Box, a packaging utility. There are a growing number of HTML5 and MSE based players showing how to do streaming. MSE lets you stream video to your page by substituting a buffer or buffers for a URL on the src property of a video element. Most of the samples I found on the web used a whole bunch of little files with segments of the video.

I read that you could also use a single segmented file. Using XMLHTTPRequest (XHR) and setRequestHeader with byte ranges,  you can get small chunks of video from a single video file. I heard it, but didn’t find a good example.. I’d always wanted to try out XHR and ranges, so I created a sample that uses MSE with a single file.

The article has two sections, building the sample, and a resource reference page. There’s also a working example to try it out. Note that the example only runs in IE11. It loads in Chrome, but I think it's having difficulty with the MP4 support.

Take a look and check out the article. Let me know what you think.

Screen shot of Simple MPEG-DASH player.

-Jay

Update:

I've rewritten the article and uploaded it to webplatform.org, and with the help of Renior at webplatform.org, uploaded the example. You can now play with the code in real time in the Dabblet environment. There are a few changes, fewer <divs>, and the video is stored locally on webplatform.org.

Enjoy.