05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系

Web大前端时代之：HTML5+CSS3入门系列：http://www.cnblogs.com/dunitian/p/5121725.html

源码案例 ：https://github.com/dunitian/LoTHTML5

1.引 入

概述

音频文件或视频文件都可以看做是一个容器文件（类似于压缩的zip）

编解码器就是读取特定的容器格式，对其中的音频与视频轨进行解码，然后实现播放

解码器

解码器（decoder），是一种输入模拟视频信号并将它转换为数字信号格式，以进一步压缩和传输的硬件/软件设备

视频格式

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

支持状况

audio的canPlayType可以检测浏览器支持的文件格式

在线检测（右击查看源码）

http://dnt.dkill.net/DNT/HTML5/demo/check.html

2.video

逆天测试仅供参考

测试浏览器：谷歌，360，火狐，Edge，IE ：mp4格式的基本上都支持了，wmv格式的基本上都不支持，avi格式的火狐不支持

案例

1.简单案例：

<videosrc="images/big.mp4"controls loop>你的浏览器不支持</video>

<videosrc="images/big.mp4"poster="http://dnt.dkill.net/Images/banner.jpg"controlsloop></video>

说明：

loop 循环播放

controls 显示工具栏

<videosrc="images/big.mp4"controls>你的浏览器不支持</video>

poster 视频预览图

<videosrc="images/big.mp4"poster="http://dnt.dkill.net/Images/banner.jpg"controlsloop></video>

autoplay 自动播放

<videosrc="images/big.mp4"controlsautoplay loop>你的浏览器不支持</video>

preload 是否在页面加载后载入视频 如果设置了 autoplay 属性，则忽略该属性

属性值：

auto - 当页面加载后载入整个视频

meta - 当页面加载后只载入元数据 (有些是浏览器是metadata)

none - 当页面加载后不载入视频

<videosrc="images/big.mp4"controlspreload="auto">你的浏览器不支持</video>

2.多源案例

浏览器自动选择第一个可识别的文件来播放

<videocontrols>

<sourcesrc="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4"/>

<sourcesrc="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"/>

</video>

3.小播放器

<videoid="myvideo"src="../images/big.mp4"poster="http://dnt.dkill.net/Images/banner.jpg" controlsloop>回家休息休息。。。</video>

<scripttype="text/javascript">

var musicObj = $("#myvideo");

//单击控制播放与否

musicObj.click(function () {

if (this.paused) {

this.play();

} else {

this.pause();

}

});

</script>

扩展：https://github.com/dunitian/LoTHTML5/tree/master/LoTVideo

3.audio

学过video之后这个就小儿科了，简单介绍一下

基本用法

<audiosrc="http://dnt.dkill.net/DNT/music/棋子.mp3"controls></audio>

<audiocontrols>

<sourcesrc="http://www.dkill.net/DNT/music/棋子.ogg"type="audio/ogg"/>

<sourcesrc="http://dnt.dkill.net/DNT/music/棋子.mp3"type="audio/mp3"/>

</audio>