Audio和Video API

Audio和Video API

• 两个重要概念：容器+解码器
• 视频容器中包括：音频轨道+视频轨道+一些其他元数据（封面、标题、子标题、字幕等等），视频格式包括avi、flv、mp4、mkv、ogv等
• 解码器：音频解码器包括AAC\MPEG-3\Ogg Vorbis，视频解码器包括H.264\vp8\Ogg Theora
• 使用API的好处：1. 作为浏览器的原生支持功能，无需安装 2. 媒体元素向web页面提供了通用、集成和可脚本制作的API
• vedio浏览器支持性检测(控制台返回为true则支持)

• 简单的vedio元素（为了防止浏览器不支持HTML5视频，可以将以flash方式插入的视频放在相同的位置作为备选内容）

• 在影片中添加字幕，首先创建一个subtitles_en.vtt文件，然后将该文件嵌入到vedio中

WEBVTT
1
00:00:01.000 --> 00:00:03.000
What do you think about HTML5 Video and WebVTT?...
2
00:00:04.000 --> 00:00:08.000
I think it's great.I can't wait for all the browsers to support it!

• audio音频文件的加载和vedio类似

• 为了防止浏览器不支持相关容器或者编解码器，可以用source进行备用声明，浏览器会根据自身播放能力自动选择，挑选最佳的来源进行播放（可以在source元素中制定type属性，指明容器类型和解码方式）

• vedio和audio中的controls属性是为了抗议用户进行控制，如果不写这个属性，音频文件就看不见界面了，为了防止这种情况的发生，不写controls属性的时候要写autoplay属性，文件就会自动播放了
• 如果内置的控件不适应用户界面的布局，或者希望可以通过默认控件中没有的的条件和动作来来控制音频或视频，可以通过一些内置的javascript函数和特性。具体的不做列举了
• 添加play按钮控制音频

Play

• 完整实例（每隔5s中抓取一个视频帧，将该帧展示在canvas中，点击canvas对应的帧，视频会从对应帧的位置重新开始播放）

重点：计算canvas中每一个帧存放的位置，drawImage（）函数，计算点击的canvas中帧是第几个（目前没有完全弄懂）