HTML5 video標籤播放視頻下載原理

HTML5 video

https://github.com/remy/html5demos/blob/master/demos/video.html

  <video preload="metadata"> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=676422 -->
    <source src="assets/dizzy.mp4" type="video/mp4" />
    <source src="assets/dizzy.webm" type="video/webm" />
    <source src="assets/dizzy.ogv" type="video/ogg" />
</video>

 

HTML5支持video和audio以前， 網頁播放流媒體文件， 都是經過其它方法， 例如 activex插件 或者 flash。

支持後，頁面能夠在web服務器上放置視頻文件， 瀏覽器根據支持的視頻格式請求相應的視頻文件。

 

規範

https://www.w3.org/TR/html5/embedded-content-0.html#the-video-element

Content model:

If the element has a src attribute: zero or more track elements, then transparent, but with no media element descendants.

If the element does not have a src attribute: zero or more source elements, then zero or more track elements, then transparent, but with no media element descendants.

Content attributes:

Global attributes

src - Address of the resource

crossorigin - How the element handles crossorigin requests

poster - Poster frame to show prior to video playback

preload - Hints how much buffering the media resource will likely need

autoplay - Hint that the media resource can be started automatically when the page is loaded

mediagroup - Groups media elements together with an implicit MediaController

loop - Whether to loop the media resource

muted - Whether to mute the media resource by default

controls - Show user agent controls

width - Horizontal dimension

height - Vertical dimension

 

video如何下載的？

http://ronallo.com/blog/html5-video-everything-i-needed-to-know/

HTML5 video does not work like streaming technologies or Flash. So how does the browser manage to play a long video without downloading the whole file before playing it? Part of the trick is that the video is encoded in such a way that the metadata is at the top of the file. This means once the first chunk of data is returned it is enough to determine whether the browser can play it all the way through. If you are encoding video for use with the video element, you will want to choose the Web optimized option in the encoding software. (See the section on video encoding above.)

不支持相似流媒體和flash的功能。

 

The real trick though is how Web servers allow you to only download the a part of a file you request. The browser requests a chunk of the video at a time which allows HTML5 video to give the appearance of streaming. This behavior of mimicking streaming is called progressive download. This also allows fast seeking through the video by clicking the time rail on an unbuffered portion of the video. In general, requesting just a chunk of a file from a Web server is called a range request or 「byte serving.」

只要服務器容許請求文件的一個部分， 就能夠實現表現上流的效果。 能夠支持 拖動進度條， 這種下載也成爲 進度下載（progressive download），

服務器支持的這種特性 叫 byte serving

You may need to do some configuration on your video server to allow for range requests. You can test this by looking at the response headers for one of your video files. Here we look at the headers for our demo video on the command line.

$ curl -I http://siskel.lib.ncsu.edu/RIS/getting_a_book/getting_a_book.mp4 HTTP/1.1 200 OK Content-Length: 8343631 Content-Type: video/mp4 Last-Modified: Thu, 20 Dec 2012 19:40:10 GMT Accept-Ranges: bytes ETag: "f79b80d2e9decd1:89fd" Server: Microsoft-IIS/6.0 Access-Control-Allow-Origin: * X-Powered-By: ASP.NET Date: Sat, 22 Dec 2012 22:04:23 GMT

使用這個命令能夠查看是否支持 bytes下載。

You will be looking for the 「Accept-Ranges: bytes」 header which advertises that the server can accept range requests.

range請求的解釋：

You can look at the request headers to see how this works from the client’s perspective. Using the network tab of the browser’s developer tools or an add-on like Firefox’s Live HTTP Headers. Go to this demo page and you’ll see 「Range: bytes=0-」 as one of the headers the browser sends when making a request for the video. This is the initial request for the first chunk of bytes. A successful response will begin with a 「206 Partial Content」 response code. The response will include the 「Accept-Ranges: bytes」 header to show that range requests are accepted. The Content-Range header (e.g. 「Content-Range: bytes 0-3771428/3771429」) shows the range of bytes which were transferred in the current response followed after the slash by the total number of bytes in the file. You’ll also see in the time rail for most players that part of the video timeline has been 「buffered」 and is available to play. The Content-Length header will show the actual number of bytes which were transferred with each request.

 

live streaming 不支持

對於實時流媒體，存在 rtsp 和 rtp協議， 可是很遺憾 video標籤不支持此功能。 目前只能經過http下載視頻。

https://tools.ietf.org/html/draft-pantos-http-live-streaming-19

Abstract

   This document describes a protocol for transferring unbounded streams
   of multimedia data.  It specifies the data format of the files and
   the actions to be taken by the server (sender) and the clients
   (receivers) of the streams.  It describes version 7 of this protocol.

 

http://stackoverflow.com/questions/5623912/how-to-stream-live-video-in-html5

I don't think it is possible now to "cheat" the HTML5 browser to encapsulate the live video stream to a ".mp4" file. I believe HTML5 will consider live video support in a near future. What you can do is just wait. :)

 

Future of Media on the Web

The simple video element is rather pedestrian these days. There’re so many other interesting things happening with media on the Web.

• Web Audio API: Not the same as the <audio> element
• WebRTC: Real Time Communication between browsers
• Popcornjs: Sync other content along with other time-based media.
• Canvas + Video: Adding a video to a canvas adds all sorts of possibilities for what you can do with video in the browser. Here’s a demo of an exploding video.
• Media Fragments: Make it possible to address a fragment of a piece of media using URIs.
• Media Groups