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.
-Jay