（HTML5）第五章 音频与视频

YouTube提供了一个试用版HTML5视频播放器，www.youtube.com/html5

标签元素

<audio src="pp.mp3" controls preload="metadata"> </audio>播放视频前的预处理

<audio src="pp.mp3" controls autoplay loop></audio> 自动播放+循环播放

<video src="pp.mp4" controls poster="pp.jpg”></video>//设置替换视频的图片，在以下三种情况下会加载：一，视频第一帧未加载完毕；二，把preload属性设置为none；三，没有找到指定的视频文件

controls属性告诉浏览器生成方便的播放控件

mediagroup属性，可以用于从不同角度拍摄的体育赛事录像，同时播放。只有chrome和opera支持。

HTML5媒体格式

一个视频文件有三个标准：视频编解码器、音频编解码器、容器的格式

浏览器考虑视频是否兼容：容器、编码器、编码设置

为了适应更多的浏览器，有以下两个方案：

· 支持多种格式，浏览器根据不同的支持度加载对应的视频文件

<video controls width="700" height="400"><source src="pp.mp4" type="video/mp4"><source src="pp.webm" type="video/webm"></video>

· 将flash作为后备或反之，将html5作为后备

JS与视频播放器

·可以通过js控制播放 http://www.prosetech.com/html5-ed1/Chapter%2005/SoundEffects.html

·使用强大的js库---内置了flash后备。

VideoJS  http://videojs.com/

jPlayer http://www.jplayer.org/

视频字幕

<video controls width="700" height="400"><source src="pp.mp4" type="video/mp4"><track  src="pp.vtt" srclang="en" kind="subtitle"  label="English" default><track src="pp.vvt" srclang="fr" kind="subtitle" lable="French"></video>

字幕是无障碍性设计需求

vvt是浏览器厂商比较认可的字幕格式。webVTT标准的知识:https://dev.w3.org/html5/webvvt

访问字幕生成器页面 https://testdrive-archive.azurewebsites.net/Graphics/CaptionMaker/

浏览器不支持的时候，可以用JS作为补充，比如Captionator,js(地址： http://captionatorjs.com/)

总结：这一张还是挺有趣，以后项目中需要的话，有必要好好看看这一章节的书。

为视频如果更好地适应浏览器提供了很多可行性指导方案。