Web前端-HeadFirst-笔记-Ch12-h5的视频实现

视频实现

方案1.flash

<vedio> <source>```</source> <object>```</object> </vedio>

方案2.<video>

属性有：

• controls 控件是否显示
• src 源文件位置
• autoplay 自动播放
• preload ：浏览器会根据此属性以及用户的带宽选择加载多少视频。细粒度地控制视频如何加载，来实现优化。将preload设置为none， 覆盖此设置；metadata，下载视频元数据，不下载视频内容；auto，浏览器决定。
• poster：当不自动播放时，视频显示的封面设置；
• width，height： 视频及海报会缩放到指定宽高，视频会保持自己的宽高比4：3或16：9，其余部分加黑边上下（letter-box）左右（pillar-boxed），

原理：

视频格式：

一个视频文件包含两个部分：每个部分都由一种特定的编码类型来编码（可以缩小数据大小，高效播放）

• WebM：Vp8视频编码，Vorbis音频编码
• MP4：H.264视频编码，AAC音频编码
• Ogg:Theora视频编码，Vorbis音频编码

容器：文件格式，用来包装（视频、音频和元数据信息），常用的有WebM、MP4、Ogg和Flash Video。
编解码器codec：对特定视频和音频编码完成编码和解码的软件。H.264\VP8\Theroa\AAC\Vorbis。

优化：

1. <video>删去src，增加<source src="不同版本1/2/3">作为浏览器备选。
2. 增加属性type/codecs优化加载速度。

Tips：

1. 全屏尚未被标准化，可以通过添加控件实现。
   
2. 控件不是html5中规范的正式部分，可能无法完全起效。可以使用javascript进行定制。