音频部分：
音频格式以及浏览器支持情况：
目前, 元素支持三种音频格式文件: 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标签对音乐格式的支持情况：
**代码演示：**
<!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 文件
视频格式的MIME类型：
通常添加视频文件我们可以通过两种方式：
一、 HTML视频
●使用 embed 标签(W3C标准)：
embed标签的作用是在 HTML 页面中嵌入多媒体元素。
●使用 object 标签(IE标准)：
object标签的作用同样是在 HTML 页面中嵌入多媒体元素。
二、HTML5
●使用 video 标签
video标签对视频格式的支持情况：
**代码演示：**
<!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）来播放的。然而，并非所有浏览器都拥有同样的插件。
Audio.js
**插件描述：** Audio.js的JavaScript库，允许HTML5的 audio 标签，用于任何地方。
**原理：** 对于高级浏览器使用audio播放音乐； 对于哪些不支持audio标签的浏览器，采用一个隐藏的flash去播放音乐； 对于外观样式采用统一的css样式表控制，保证在任何浏览器上面浏览都能达到相同的浏览效果
**关于下载：**
**使用步骤：**
⒈下载audio.js文件包；
⒉引入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>
**效果如图：**
Video.js
**插件描述：** Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持ie低版本请下载5.4.3版 ）
**关于下载：**
**使用步骤：**
⒈下载video.js文件包；
⒉在页面中引用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>
**效果如图：**
