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

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

音频部分：

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

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

![这里写图片描述](https://img-blog.csdn.net/20171106094148538?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3loc3RhcnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

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

![音频格式的MIME类型](https://img-blog.csdn.net/20171105213605194?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3loc3RhcnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

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

一、 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标签对音乐格式的支持情况：

![这里写图片描述](https://img-blog.csdn.net/20171105232713713?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3loc3RhcnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

**代码演示：**

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音频</title>
</head>
<body>
<!--audio标签的属性：1.src:     要播放的音频的URL;2.autoplay:如果出现该属性，则音频在就绪后马上播放;3.controls:如果出现该属性，则向用户显示控件，比如播放按钮;4.loop:    如果出现该属性，则每当音频结束时重新开始播放;5.preload: 如果出现该属性，则音频在页面加载时进行加载，并预备播放(如果使用"autoplay"则忽略该属性)。-->
<audio autoplay="autoplay" controls="controls" loop="loop" preload="metadata"><!--audio 元素允许多个 source 元素,source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式。--><source src="NowYouSeeMe.mp3" type="audio/mpeg"><source src="NowYouSeeMe.ogg" type="audio/ogg"><!--<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。-->您的浏览器暂不自持播放。
</audio>
</body>
</html>

视频部分：

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

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

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

![这里写图片描述](https://img-blog.csdn.net/20171105233004894?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3loc3RhcnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

视频格式的MIME类型：

![这里写图片描述](https://img-blog.csdn.net/20171105224254214?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3loc3RhcnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

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

一、 HTML视频

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

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

二、HTML5

●使用 video 标签

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

![这里写图片描述](https://img-blog.csdn.net/20171105225528843?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3loc3RhcnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

**代码演示：**

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>视频</title>
</head>
<body>
<!--video标签的属性：1.src:     要播放的视频的URL;2.autoplay:如果出现该属性，则视频在就绪后马上播放;3.controls:如果出现该属性，则向用户显示控件，比如播放按钮;4.loop:    如果出现该属性，则每当视频结束时重新开始播放;5.preload: 如果出现该属性，则视频在页面加载时进行加载，并预备播放(如果使用"autoplay"则忽略该属性)。-->
<video autoplay="autoplay" controls="controls" loop="loop" preload="metadata"><!--video 元素允许多个 source 元素,source 元素可以链接不同的音频文件.浏览器将使用第一个可识别的格式.--><source src="WhatKindOfMan.mp4" type="video/mp4"><source src="WhatKindOfMan.ogg" type="video/ogg"><!--<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的.-->您的浏览器暂不自持播放。
</video>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript为视频添加事件方法</title>
</head>
<body>
<div style="text-align:center"><button onclick="playPause()">播放/暂停</button><button onclick="makeBig()">放大</button><button onclick="makeSmall()">缩小</button><button onclick="makeNormal()">普通</button><br><video id="video" width="420"><source src="WhatKindOfMan.mp4" type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video>
</div>
</body>
<script>var myVideo = document.getElementById("video")function playPause() {if (myVideo.paused) {myVideo.play();} else {myVideo.pause();}}function makeBig() {myVideo.width = 560;}function makeSmall() {myVideo.width = 320;}function makeNormal() {myVideo.width = 420;}
</script>
</html>

关于插件的使用：

**背景：**
直到现在，仍然不存在一项旨在网页上播放音频/视频的标准。因此，大多数音频/视频是通过插件（比如 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文件包；

![这里写图片描述](https://img-blog.csdn.net/20171106135838617?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3loc3RhcnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

⒉引入audio.js 文件；

``` ```

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>* {margin: 0px;padding: 0px;}#div {margin: 0px 490px;background-color: #58a429;}#bgImage {margin-top: 50px;margin-left: auto;margin-right: auto;width: 500px;height: 300px;background: url("../../../img/nowyouseeme.png") no-repeat;background-size: contain;}</style><title>插件使用</title>
</head>
<body>
<div id="bgImage"></div>
<div id="div"><audio src="NowYouSeeMe.mp3" preload="auto"></audio>
</div>
</body>
<script src="../../../../jQuery/jquery-3.1.1.js"></script>
<script src="audiojs/audio.min.js"></script>
<script>audiojs.events.ready(function () {audiojs.createAll();});
</script>
</html>

**效果如图：**

![这里写图片描述](https://img-blog.csdn.net/20171106145814013?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3loc3RhcnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

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文件包；

![这里写图片描述](https://img-blog.csdn.net/20171106151251453?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3loc3RhcnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

⒉在页面中引用video-js.cs样式文件和video.js；

<link rel="stylesheet" href="../../../css/video-js.css">

<script src="videojs/video.min.js"></script>
<script>videojs.options.flash.swf = "video-js.swf";
</script>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>* {margin: 0px;padding: 0px;}#video {margin-top: 20px;margin-left: 300px;}</style><title>视频插件的使用</title><link rel="stylesheet" href="../../../css/video-js.css">
</head>
<body>
<div id="video"><video id="testVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="800"height="400" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}"><source src="WhatKindOfMan.mp4" type='video/mp4'/><!-- Tracks need an ending tag thanks to IE9 --><track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --><track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track></video>
</div>
</body>
<script src="videojs/video.min.js"></script>
<script>videojs.options.flash.swf = "video-js.swf";
</script>
</html>

**效果如图：**

![这里写图片描述](https://img-blog.csdn.net/20171106153614879?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3loc3RhcnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

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

**Programming is an art form.**