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 05/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/)

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

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