音视频多媒体

大家都有在网页中浏览视频的经历，但在 HTML5 之前，对视频乃至音频都还没有一个标准，因此在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是 QuickTime，也可能是 RealPlayer 或者 Flash。浏览器很好的整合了这些插件，你完全意识不到它们的存在。

HTML5 标准可以通过 video 标签、audio 标签来实现对音视频的支持，相比较旧标准更容易实现，可以节省开发时间和成本，同时提高开发效率和用户体验。

1 浏览器对音视频格式的支持

视频格式：

浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (从 Opera 25 起) YES YES
  • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

音频格式：

浏览器 MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

2 HTML5 音视频标签

标签名 功能和语义 属性 单标签还是双标签
video 引入视频 src：设置视频地址。
width：设置视频宽度。
height：设置视频高度。
constrols：显示控制条，不需要值
muted：静音，不需要值
autoplay：自动播放，不需要值
loop：循环播放，不需要值
preload：预先加载，不需要值
poster：设置视频封面图片地址。		 双标签
audio 引入音频 scr：设置音频地址。
constrols：显示控制条，不需要值
muted：静音，不需要值
autoplay：自动播放，不需要值
loop：循环播放，不需要值
preload：预先加载，不需要值		 双标签
source 引入音频或视频 src：设置音频或视频文件的地址。
type：设置音频或视频文件的类型		 单标签

注意：

① 视频自动播放生效的前提是，设置静音。

② 音频不允许自动播放。

type属性值：

视频：

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' 

<!-- 视频 -->
<video src="../dist/videos/movie.mp4" controls muted loop preload poster="../dist/imgs/bg01.png"></video>

<!-- 音频 -->
<audio src="../dist/music/musice.mp3" controls muted autoplay preload></audio>

<!-- 使用 source 标签引入视频 -->
<video width="800" controls poster="../dist/imgs/bg02.jpg">
    <source src="../dist/videos/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="../dist/videos/movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
    <source src="../dist/videos/movie.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>

results matching ""

    No results matching ""