HTML音频视频、JS方法，以及插件使用教学

**文章主要讲解如何给页面添加音频以及视频媒体文件，以及如何调用JavaScript方法使您插入的媒体文件更完善。**

---

音频部分：

音频格式以及浏览器支持情况：


目前, 元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

**音频格式的MIME类型：** 

---

通常添加音频文件我们可以通过两种方式：


一、 HTML音频


●使用 embed 标签(W3C标准)：
embed标签定义嵌入的内容，比如插件。


●使用 object 标签(IE标准)：
object标签用于包含对象，比如图像、音频、视频、JavaApplet、ActiveX、PDF 以及 Flash。


object和embed的区别：


1、是为了兼容不同浏览器，IE只支持对object的解析；火狐，谷歌，Safari只支持对embed的解析；
2、object标签用clsid表示控件的唯一id，而embed标签用type表示插件的唯一名称。比如flash插件type为：application/x-shockwave-flash，mp3播放插件type为audio/mpeg；
3、为了兼容多个浏览器，可以通过ie浏览器动态加载Object标签，非ie浏览器动态加载embed标签；或者在object标签里面嵌入embed标签。

---

二、HTML5


●使用 audio 标签


audio标签对音乐格式的支持情况：

**代码演示：**

---

视频部分：

通常添加视频文件，我们也是通过HTML部分或者HTML5标签来执行。


视频格式以及浏览器支持情况：

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


视频格式的MIME类型：


---

通常添加视频文件我们可以通过两种方式：


一、 HTML视频


●使用 embed 标签(W3C标准)：
embed标签的作用是在 HTML 页面中嵌入多媒体元素。


●使用 object 标签(IE标准)：
object标签的作用同样是在 HTML 页面中嵌入多媒体元素。

---

二、HTML5


●使用 video 标签


video标签对视频格式的支持情况：

**代码演示：**

**使用JavaScript为视频添加事件方法：**

    
    



    播放/暂停
    放大
    缩小
    普通
    

    

---

关于插件的使用：

**背景：**
直到现在，仍然不存在一项旨在网页上播放音频/视频的标准。 因此，大多数音频/视频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
**插件的使用可以极大改善不同浏览器对于音频以及视频格式的兼容性;** **并且允许使用者个性化定制播放器的页面效果**
目前，JavaScript音频/视频网页播放器插件种类繁多，操作简单，只需要下载插件的JavaScript库文件并引入代码即可使用。 下面重点介绍**audio.js**以及**video.js**的详细使用步骤。

---

Audio.js

**插件描述：** Audio.js的JavaScript库，允许HTML5的 audio 标签，用于任何地方。
**原理：** 对于高级浏览器使用audio播放音乐； 对于哪些不支持audio标签的浏览器，采用一个隐藏的flash去播放音乐； 对于外观样式采用统一的css样式表控制，保证在任何浏览器上面浏览都能达到相同的浏览效果
**关于下载：** [Audio.js Github下载地址](http://kolber.github.io/audiojs/)
**使用步骤：**
⒈下载audio.js文件包； 
⒉引入audio.js 文件； ``` ```
⒊编写audio.js代码，调整样式；

**效果如图：** 

---

Video.js

**插件描述：** Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持ie低版本请下载5.4.3版 ）
**关于下载：** [Video.js最新v6.2.5版 2017-8-21更新](http://www.jq22.com//jquery/jQueryVideo.js6.2.5.zip)
**使用步骤：**
⒈下载video.js文件包； 
⒉在页面中引用video-js.cs样式文件和video.js；

⒊编写video.js代码，调整样式；

**效果如图：** 
**通过video.js插件播放视频，页面样式更丰富，动态效果更美观，并且支持样式的个性化定制以及字幕的添加。**

---

**Programming is an art form.**