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 moretrack
elements, then transparent, but with no media element descendants.- If the element does not have a
src
attribute: zero or moresource
elements, then zero or moretrack
elements, then transparent, but with no media element descendants.- Content attributes:
- Global attributes
src
- Address of the resourcecrossorigin
- How the element handles crossorigin requestsposter
- Poster frame to show prior to video playbackpreload
- Hints how much buffering the media resource will likely needautoplay
- Hint that the media resource can be started automatically when the page is loadedmediagroup
- Groups media elements together with an implicitMediaController
loop
- Whether to loop the media resourcemuted
- Whether to mute the media resource by defaultcontrols
- Show user agent controlswidth
- Horizontal dimensionheight
- 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
HTML5 video标签播放视频下载原理的更多相关文章
- 在使用html5的video标签播放视频时为何只有声音却没有图像
在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...
- 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
- html5 video标签播放视频流
从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频. 做了一个demo,用html5的video,audio标签实现. 后台实现代码: @GetMapping(value = " ...
- Video标签播放视频?谷歌浏览器?safari?? 谷歌浏览器播放不了mp4格式的视频的原因
webm格式和mp4格式,判断了浏览器能否支持的视频类型后,给了一个if判断,如果是支持mp4格式,就返回视频后缀mp4,如果是webm,就返回后缀webm.结果,在谷歌浏览器中播放不了,为什么我指定 ...
- HTML5 video 连续播放视频
HTML Video标签属性 html页面代码 <video height="2160" id="playVideo" width="3840& ...
- video标签播放视频
<!doctype html> <html> <head> <meta charset=utf-8> <title>测试</title ...
- IPhone微信H5用Video标签播放不了视频
H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)
- html5 video标签屏蔽右键视频另存为的js代码-HTML5教程
点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过 做HTML5的video标签,本身我们 ...
- html5 video标签如何禁止视频下载
html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...
随机推荐
- 数字转IP地址函数
--------------------------------------------------------------------- -- Author : htl258(Tony) -- Da ...
- 虚拟机(VMware12 pro)安装Mac OS 10.10
下载VMware12pro,Mac OS 10.10.ios,虚拟机破解: 在虚拟机中创建新虚拟机://http://cdnnn.07net01.com/linux/2016/01/1130384.h ...
- js整理4
异步处理 错误处理 同步 function A() { B(); } function B() { C(); } function C() { throw new Error('something h ...
- JSON.stringify() / JSON.parse()
JSON.stringify() 这个方法可以把javascript对象转换成json字符串. JSON.parse() 这个方法可以把 json 字符串转换成 javascript对象. [下面来看 ...
- Unity Standard Assets 简介之 CrossPlatformInput
这篇介绍跨平台输入工具包CrossPlatformInput,主要包括 Prefabs 和 Scripts 两个文件夹: 由于该包中的脚本联系比较紧密,都是配合着去实现特定的功能,没有太大的独立可重用 ...
- js 封装设计cookie
http://www.imooc.com/article/12700<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- ZeroMQ接口函数之 :zmq_msg_move - 将一个消息里面的内容移动到另一个消息里面
ZeroMQ 官方地址 :http://api.zeromq.org/4-1:zmq_msg_move zmq_msg_move(3) ØMQ Manual - ØMQ/3.2.5 Name zm ...
- dev checkbox多选
GridControl如果要支持多选,设置Options->OptionSeletion->MultiSelet为true就ok.
- Weblogic部署项目三种方式
在weblogic中部署项目通常有三种方式:第一,在控制台中安装部署:第二,将部署包放在domain域中autodeploy目录下部署:第三,使用域中配置文件config.xml 进行项目的部署. 控 ...
- 温故而知新 兼容性较强的轮播器superslide.js
官网: http://www.superslide2.com/index.html demo: http://www.superslide2.com/demo.html API: http://www ...