###音频&视频
大家都有在网页中浏览视频的经历，但在Html5之前，对视频乃至音频都还没有一个标准
因此在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是QuickTime，也可能是
RealPlayer 或者 Flash。浏览器很好的整合了这些插件，你完全意识不到它们的存在。
在介绍Html5中的音视频标签前，我们需要了解一些概念
1. 容器
大多数人会认为视频文件就是 .avi .mp4,但事实上 avi和mp4仅仅是容器的格式，
它只决定怎么将视频存储起来，而不关系存储的内容。有点类似于.zip。
不管是音频或视频文件，实际上都只是一个容器文件。类似于压缩一组文件的ZIP文件
视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据。
视频播放的时候，音频轨道和视频轨道是绑定在一起的。
元数据包含了视频的封面、标题、子标题、字幕等相关信息。
主流的视频文件格式(容器格式) 主流的音频文件格式
MPEG-4: 通常以.mp4为扩展名 MPEG-3 .mp3
Flash视频: 通常以.flv为扩展名 Acc音频 .acc
Ogg: 通常以.ogv为扩展名 Ogg音频 .ogg
WebM: 通常以.webm为扩展名
音频视频交错: 通常以.avi为扩展名
2. 编解码器
音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便
音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据
视频编解码器 音频编解码器
H.264 AAC
VP8 MPEG-3
Ogg Theora Ogg Vorbis
H.264： 别名 MPEG-4的第十部分,由MPEG研发并于2003年标准化，它的目的支持一切设备，无论是低带宽低cpu，还是高带宽高cpu 或者是两者之间。
要做到这一点，H.264标准被分成不同的几种配置。高配置使用了更多特性，这会导致在解码过程中更加消耗CPU，但视频文件本身会更小，视频效果也更好。
苹果iphone手机 基本配置(BaseLine)
正常的电视机支持 基本配置(BaseLine) 和 主配置(Main)两种
正常的电脑支持 基本配置(BaseLine) 和 主配置(Main) 高级配置(high)三种
当然有一些编解码器受专利的保护，有一些则是免费的，例如Ogg的Vorbis音频编解码器。
Ogg的Theora视频编解码器也是可以免费使用的。而想使用H.264的话就需要支付相关的费用了。
现在的视频编解码器会使用各种技巧减少从一帧到另一帧过程中传递的信息数量，它们不会存储每一帧的所有信息，而只是存储两帧之间的差异信息。
编码器也分有损和无损，无损视频文件一般太大，在网页中没有优势，所以我们重点研究有损编解码器。
有损编解码器中，信息在编码过程中丢失是无法避免的，反复的对视频编码会导致其画面不均匀。
3.浏览器对于容器和编解码器支持的情况
Browser MP4(H.264 + AAC) WebM(VP8 + Vorbis ) Ogg(Theora + Vorbis)
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES
http://www.html5videoplayer.net/html5video/html5-video-browser-compatibility/
目前还没有一种编解码和容器的组合能应用于所有的浏览器中！！
4.处理视频的一个流程
1.制作一个Ogg容器中使用Theora视频和Vorbis音频的版本
2.制作另外一个版本，使用WebM视频容器（VP8 + Vorbis）
3.再制作一个版本，使用MP4视频容器，并使用H.264基本配置的视频和ACC低配的音频
4.链接上面3个文件到同一个video元素，并向后兼容基于Flash的视频播放器
5. 格式转化
----> 用 FFmpeg 制作MP4 视频
ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4
----> 用 FFmpeg 制作 WebM 视频
ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm
----> 用FFmpeg 制作 Ogg 视频
ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv
----> 用FFmpeg 制作Mp3音频
ffmpeg -i test.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3
----> 用 FFmpeg 制作Ogg音频
ffmpeg -i test.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg
----> 用FFmpeg 制作ACC音频
ffmpeg -i test.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac
###html5标签
1.<video>:视频
----> 标签的属性:
width :视频显示区域的宽度，单位是CSS像素
height :视频展示区域的高度，单位是CSS像素
poster :一个海报帧的URL，用于在用户播放或者跳帧之前展示
src : 要嵌到页面的视频的URL
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
muted : 是否静音
preload : 该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；
换句话说就是提示浏览器该视频不需要缓存。
metadata: 提示尽管作者认为用户不需要查看该视频，
不过抓取元数据（比如：长度）还是很合理的。
auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，
可以下载整个视频，即使用户并不一定会用它。
空字符串：也就代指 auto 值。
<video src="resource/video/test.mp4" autoplay muted controls width="500" height="500" poster="resource/img/xfz.png"> <source src="resource/video/OUTPUT.mp4" type="video/mp4"></source> <source src="resource/video/OUTPUT.ogv" type="video/ogg"></source> <source src="resource/video/OUTPUT.webm" type="video/webm"></source> <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"> <param name="movie" value="myvideo.swf" /> <param name="flashvars" value="autostart=true&file=myvideo.swf" /> </object> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="resource/video/OUTPUT.mp4">下载视频</a> </video>---->js相关属性:
duration : 媒体总时间(只读)
currentTime : 开始播放到现在所用的时间(可读写)
muted : 是否静音(可读写,相比于volume优先级要高)
volume : 0.0-1.0的音量相对值(可读写)
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
poster : 视频播放前的预览图片(读写)
width、height : 设置视频的尺寸(读写)
videoWidth、 videoHeight : 视频的实际尺寸(只读)
setTimeout(function(){ console.log(video.duration); console.log(video.videoWidth); console.log(video.videoHeight); },500)---->js相关函数
play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体
video.play(); setTimeout(function(){ video.pause(); },5000)abort 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
canplay 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
canplaythrough 在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
durationchange 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied 媒体被清空（初始化）时触发。
ended 播放结束时触发。
error 在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
loadeddata 媒体的第一帧已经加载完毕。
loadedmetadata 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
loadstart 在媒体开始加载时触发。
mozaudioavailable 当音频数据缓存并交给音频层处理时
pause 播放暂停时触发。
play 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
playing 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
progress 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
ratechange 在回放速率变化时触发。
seeked 在跳跃操作完成时触发。
seeking 在跳跃操作开始时触发。
stalled 在尝试获取媒体数据，但数据不可用时触发。
suspend 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
timeupdate 元素的currentTime属性表示的时间已经改变。
volumechange 在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
waiting 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发
2. <audio>:音频
---->标签的属性:
src:资源地址 controls:该属性定义是显示还是隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
muted : 是否静音
preload : 该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；
换句话说就是提示浏览器该视频不需要缓存。
metadata: 提示尽管作者认为用户不需要查看该视频，
不过抓取元数据（比如：长度）还是很合理的。
auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，
可以下载整个视频，即使用户并不一定会用它。
空字符串：也就代指 auto 值。
<audio controls > <source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'></source> <source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'></source> <source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'></source> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="resource/audio/OUTPUT.mp3">下载视频</a> </audio>---->js相关属性:
duration : 媒体总时间(只读)
currentTime : 开始播放到现在所用的时间(可读写)
muted : 是否静音(可读写,相比于volume优先级要高)
volume : 0.0-1.0的音量相对值(可读写)
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
setTimeout(function(){ console.log(audio.duration); },500)---->js相关函数
play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体
audio.play(); setTimeout(function(){ audio.pause(); },5000)abort 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
canplay 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
canplaythrough 在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
durationchange 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied 媒体被清空（初始化）时触发。
ended 播放结束时触发。
error 在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
loadeddata 媒体的第一帧已经加载完毕。
loadedmetadata 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
loadstart 在媒体开始加载时触发。
mozaudioavailable 当音频数据缓存并交给音频层处理时
pause 播放暂停时触发。
play 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
playing 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
progress 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
ratechange 在回放速率变化时触发。
seeked 在跳跃操作完成时触发。
seeking 在跳跃操作开始时触发。
stalled 在尝试获取媒体数据，但数据不可用时触发。
suspend 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
timeupdate 元素的currentTime属性表示的时间已经改变。
volumechange 在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
waiting 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发
3. <source>
视频：
type='video/webm; codecs="vp8, vorbis"'
type='video/ogg; codecs="theora, vorbis"'
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
音频：
type='audio/ogg; codecs="vorbis"'
type='audio/aac; codecs="aac"'
type='audio/mpeg'
4.状态标签
----->meter:用来显示已知范围的标量值或者分数值。
value:当前的数值。
min:值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0
max:值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1
low:定义了低值区间的上限值,如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。
high:定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。
optimum:这个属性用来指示最优/最佳取值。
<meter value="60" min="20" max="100"></meter> <meter value="80" min="20" max="100" low="40" high="60"></meter> <meter value="30" min="20" max="100" low="40" high="60" optimum="80"></meter>
----->progress:用来显示一项任务的完成进度
max:该属性描述了这个progress元素所表示的任务一共需要完成多少工作.
value：该属性用来指定该进度条已完成的工作量.
如果没有value属性,则该进度条的进度为"不确定",
也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成
<progress value="50" max="100"></progress> <progress max="100"></progress>
5.列表标签
----->datalist:datalist会包含一组option元素，这些元素表示其表单控件的可选值
它的id必须要和input中的list一致
input::-webkit-input-placeholder{ color: pink; } <input type="text" placeholder="你最喜欢是？" list="zdy"></input> <datalist id="zdy"> <option value="1">10</option> <option value="2">20</option> <option value="3">30</option> <option value="4">40</option> </datalist>----->details: 一个ui小部件，用户可以从其中检索附加信息。
open属性来控制附加信息的显示与隐藏
summary:用作 一个<details>元素的一个内容摘要（标题）
<details> <summary>男生</summary> <p>一样的男人</p> <p>一样的男人</p> <p>一样的男人</p> </details>
6.注释标签
----->ruby <span><ruby>张<rt>姓氏</rt>三</ruby></span>
rt: 展示文字注音或字符注释。
7.标记标签
marK:着重
<span>是在<mark>世纪</mark>他美丽的就是来</span>
2670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
