HTML5 Video
Https://github.com/remy/html5demos/blob/master/demos/video.html
<Videopreload= "metadata"> <!--https://bugzilla.mozilla.org/show_bug.cgi?id=676422 - <Sourcesrc= "Assets/dizzy.mp4"type= "Video/mp4" /> <Sourcesrc= "ASSETS/DIZZY.WEBM"type= "VIDEO/WEBM" /> <Sourcesrc= "ASSETS/DIZZY.OGV"type= "Video/ogg" /></Video>
Before HTML5 supports video and audio, web pages play streaming media files through other methods, such as ActiveX plugins or Flash.
After support, the page can place the video files on the Web server, and the browser requests the corresponding video files according to the supported video formats.
Specification
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 D Escendants.
-
-
If The element does not has 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
-
-How the
-
crossorigin
element handles Crossorigin requests
-
-
poster
-Poster frame to show prior to video playback
-
-
preload
-Hints How much buffering the media resource would likely need
-
-
autoplay
-Hint that the media resource can being started automatically
when the page is loaded
-
-
mediagroup
-Groups Media Elements together
MediaController
with an implicit
-
-
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
How is video downloaded?
http://ronallo.com/blog/html5-video-everything-i-needed-to-know/
HTML5 Video does not work like streaming technologies or Flash. So what does the browser manage to play a long video without downloading the whole file before playing it? Part of the trick was that the video was encoded in such a, the metadata is at the top of the file. This means once the first chunk of data is returned it's enough to determine whether the browser can play it all the Through. If You is encoding video for use with the video element, you'll want to choose the Web optimized option in the encoding Software. (See the sections on video encoding above.)
Features such as streaming media and Flash are not supported.
The real trick though is what the Web servers allow you to have 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 is 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."
As long as the server allows a portion of the file to be requested, it can achieve a high performance effect. can support drag progress bar, this download also become a progress download (progressive download),
This feature supported by the server is called Byte serving
Need to does some configuration on your video server to allow for range requests. You can test the looking at the response headers for one of the your video files. Here is the headers for our demo video in the command line.
$ curl -I http://siskel.lib.ncsu.edu/RIS/getting_a_book/getting_a_book.mp4HTTP/1.1 200 OKContent-Length: 8343631Content-Type: video/mp4Last-Modified: Thu, 20 Dec 2012 19:40:10 GMTAccept-Ranges: bytesETag: "f79b80d2e9decd1:89fd"Server: Microsoft-IIS/6.0Access-Control-Allow-Origin: *X-Powered-By: ASP.NETDate: Sat, 22 Dec 2012 22:04:23 GMT
Use this command to see if bytes downloads are supported.
You'll be looking for the ' accept-ranges:bytes ' header which advertises that the server can Accept range requests.
Explanation of the range request:
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 th E video. The initial request for the first chunk of bytes. A successful response would begin with a "206 Partial Content" response code. The response would include the "Accept-ranges:bytes" header to show that range requests is accepted. The Content-range header (e.g. "Content-range:bytes 0-3771428/3771429") shows the Range of bytes which were transferred I n the current response followed after the slash is 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 have been "buffered" and is available to Play. The content-length header would show the actual number of bytes which were transferred with each RequeSt.
Live Streaming does not support
For live streaming, there is an RTSP and RTP protocol, but unfortunately the video tag does not support this feature. Video can only be downloaded via HTTP at this time.
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 being taken by the server (sender) and the Clients (rece Ivers) 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 would consider live video support in a near future. What's the can do is just wait. :)
Future of Media on the Web
The simple video
element was rather pedestrian these days. There ' re so many and 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 and other time-based media.
- Canvas + video:adding A video to a canvas adds all sorts of possibilities for what the can does 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
HTML5 video tag play videos download principle