您好,欢迎来到步遥情感网。
搜索
您的当前位置:首页HTML5video标签播放视频下载原理

HTML5video标签播放视频下载原理

来源:步遥情感网
HTML5video标签播放视频下载原理

HTML5 video

HTML5⽀持video和audio之前, ⽹页播放流媒体⽂件, 都是通过其它⽅法, 例如 activex插件 或者 flash。⽀持后,页⾯可以在web服务器上放置视频⽂件, 浏览器根据⽀持的视频格式请求相应的视频⽂件。

规范

:

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

If the element does not have a attribute: zero or more elements, then zero or more elements, then , but with nodescendants.:

- Address of the resource

- How the element handles crossorigin requests- Poster frame to show prior to video playback- Hints how much buffering the will likely need

- Hint that the can be started automatically when the page is loaded- Groups together with an implicit- Whether to loop the

- Whether to mute the by default- Show user agent controls- Horizontal dimension- Vertical dimension

video如何下载的?

HTML5 video does not work like streaming technologies or Flash. So how does the browser manage to play a long videowithout downloading the whole file before playing it? Part of the trick is that the video is encoded in such a way that themetadata is at the top of the file. This means once the first chunk of data is returned it is enough to determine whether thebrowser can play it all the way through. If you are encoding video for use with the video element, you will want to choose theWeb 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 achunk of the video at a time which allows HTML5 video to give the appearance of streaming. This behavior of mimickingstreaming is called progressive download. This also allows fast seeking through the video by clicking the time rail on anunbuffered portion of the video. In general, requesting just a chunk of a file from a Web server is called a range request or “.”只要服务器允许请求⽂件的⼀个部分, 就可以实现表现上流的效果。 可以⽀持 拖动进度条, 这种下载也成为 进度下载(progressivedownload),

服务器⽀持的这种特性 叫 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 theresponse 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.mp4HTTP/1.1 200 OK

Content-Length: 8343631Content-Type: video/mp4

Last-Modified: Thu, 20 Dec 2012 19:40:10 GMTAccept-Ranges: bytes

ETag: \"f79b80d2e9decd1:fd\"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 “: 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’sdeveloper tools or an add-on like Firefox’s . Go to and you’ll see “Range: bytes=0-” as one of the headers the browser sendswhen making a request for the video. This is the initial request for the first chunk of bytes. A successful response will begin witha “206 Partial Content” response code. The response will include the “Accept-Ranges: bytes” header to show that rangerequests are accepted. The header (e.g. “Content-Range: bytes 0-3771428/3771429”) shows the range of bytes which weretransferred in the current response followed after the slash by the total number of bytes in the file. You’ll also see in the time railfor most players that part of the video timeline has been “buffered” and is available to play. The header will show the actualnumber of bytes which were transferred with each request.

live streaming 不⽀持

对于实时流媒体,存在 rtsp 和 rtp协议, 但是很遗憾 video标签不⽀持此功能。 ⽬前只能通过http下载视频。

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.

I don't think it is possible now to \"cheat\" the HTML5 browser to encapsulate the live video stream to a \".mp4\" file. I believeHTML5 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 onthe Web.

: Not the same as the

: Real Time Communication between browsers

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

: Make it possible to address a fragment of a piece of media using URIs.Media Groups

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- obuygou.com 版权所有 赣ICP备2024042798号-5

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务