Is it possible to stream a html5 video?

Question

I have a website that displays videos. It seems to work OK with 5 minute "webm" and "mp4" videos that are referenced by the HTML5 video tag. But if I ever use long videos, I'm worried that the website would be overwhelmed. The website uses ASP.net, and I did find an article on the topic of progressive download of large files with asp.net. However, I don't know if getting small packets of files interferes with the user doing a "seek" (eg dragging the control bar position to a point he is interested in, for instance). I also don't know if it would stream pages that don't need to be streamed.
Is there any way to solve the problem of too much video data being sent over the internet at once, and overwhelming either my server or the user's PC?

Answer 1

This should help you: Streaming MP4 video through .NET HTML5

Seeking and buffering is handled by the player itself, and yes when you seek to a new point in the video it will automatically just request those parts of the video.

Answer 2

There isn't a way to do adaptive streaming of HTML5 videos, but you shouldn't have to worry about seeking in long videos. Modern web servers allow browsers to request chunks of a file, so if a user is watching a very long video and skips right to the middle, the browser will stop downloading from the beginning and start retrieving the video file from the spot they skipped to. Contrast this with the early days of Flash video, when you have to wait for the whole beginning of a video file to download in sequence to get to the middle part you want to watch.

There are, however, a few things you can do to conserve bandwidth and keep your server happy.

First, if a user has started watching a video and is done with it, you can make sure the browser doesn't continue to download the rest of that large file. For example, this may happen if you're switching through multiple videos on a single page or if you're using a framework like Ember.js or Backbone to navigate through multiple "pages" without actually point your browser to a new URL.

If you pause a video and remove it from the DOM, the browser might still be downloading it. But you can stop that with code like this:

video.src = "";
video.load();

Also, consider storing your video files on a CDN . That way, the server that's running your ASP scripts, communicating with your database and handling other related logic is not also responsible for serving up those large files. There are other benefits as well, like having separate and more efficient headers and having servers in multiple locations that are geographically closer to your users.

Answer 3

HTML5 introduces the MediaStream API , which is meant to capture and stream video and audio data, primarily intented to get access to local media devices, eg a webcam. But using the MediaStream object concatenated with XHR you should be able to provide video streaming without further plugins. The browser support is not widspread right now and in not-up-to-date versions of Firefox and Chromium, you have to enable it via some sort of setting (eg about:flags in Chromium).

I don't know of any working implementation for streaming video from a server, I just played around with webcam data recently. I think that it is possible (somewhen even with broad browser support ;-). Be aware that HTML5 consists of many different API's most of which you would normally use via JS.

See also: http://www.html5rocks.com/en/tutorials/webrtc/basics/?redirect_from_locale=de#toc-mediastream