前端入门学习笔记（九）HTML5基础（三）网页的audio,video标签

<audio>标签

HTML5 audio标签

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素来进行音频播放。在此之前，许多音频是通过插件（比如Flash）来播放的（需要用到embed标签）

网易云所提供的外链播放器代码及其效果

<embed src="//music.163.com/style/swf/widget.swf?sid=514774040&type=2&auto=0&width=320&height=66" width="340" height="86"  allowNetworking="all"></embed>

这里写图片描述

需要注意的是，IE8以及更早的IE版本不支持<audio>元素。

如何使用audio元素

<audio>元素有controls，autoplay 和 loop 属性。
可写为<audio controls autoplay loop>
以下为实例代码

<audio controls> 
   <source src="https://www.w3cschool.cn/statics/demosource/horse.ogg" type="audio/ogg">
   您的浏览器不支持 audio 元素。 
</audio>

加了controls后，才会有能够控制音频的播放的空间，否则将无法对音频进行播放、暂停等操作。
<source>规定了多媒体资源, 可以是多个，在 <video>与<audio>标签中使用。
src里面的是你的音频文件的地址，type即MIME Type，可理解为解析该音频文件的方法。
“您的浏览器不支持 audio 元素。”这段文字，在<audio>标签不被浏览器支持的时候才会显示出来，若浏览器支持则会被隐藏。

此为有controls
此为无controls
以下是音频格式以及其所对应的解析方法

音频格式(format) 解析方法(MIME Type)

MP3 audio/mepg

Ogg audio/Ogg

Wav audio/waw

如果大家有看W3C的官方手册，官方的使用方法为

<audio controls> 
  <source src="horse.ogg" type="audio/ogg"> 
  <source src="horse.mp3" type="audio/mpeg"> 
您的浏览器不支持 audio 元素。 
</audio>

这样的写法仍旧只会播放一个音频文件，但为什么要写入两种音频格式呢？因为不同的浏览器他所能够支持的音频文件各不相同，并非能够支持 <audio>元素所支持三种音频格式文件: MP3, Wav, 和 Ogg:
以下为不同浏览器所支持的音频文件格式

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	NO	YES	YES

为了使支持<audio>的浏览器能够顺利播放音频，建议同时使用两种音频播放格式。

<video>标签

HTML5 video标签

video标签既然与audio放在同一篇文章中，那当然是因为两者有许多相同。
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

如何使用video元素

<video>元素有controls，autoplay 和 loop 属性。
可写为<video controls autoplay loop>
以下为实例代码

<video width="320" height="240" controls>
    <source src="https://www.w3cschool.cn/statics/demosource/movie.mp4" type="video/mp4">
    您的浏览器不支持 HTML5 video 标签。
</video>

使用方法与audio如出一辙，仅多了width与hight来设置视频的宽度与高度。故此处不再赘述

当前，元素支持三种视频格式： MP4, WebM, 和 Ogg:
以下是视频格式以及其所对应的解析方法

视频格式(format)	解析方法(MIME Type)
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

以下为不同浏览器所所支持的不同视频格式

浏览器	MP4	WebM	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	NO	NO
Opera 10.6+	NO	YES	YES

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

音频格式(format)	解析方法(MIME Type)
MP3	audio/mepg
Ogg	audio/Ogg
Wav	audio/waw