使用媒体标签最大的缺点在于缺少编解码器的支持
一、浏览器支持性检测
检测浏览器是否支持audio元素或video元素最简单的方式就是用脚本动态创建它，然后检测特定函数是否存在
var hasVideo=!!(document.createElement('video').canPlayType);
这段脚本会动态创建一个video元素，然后检查canPlayType()函数是否存在。通过"!!"运算符将结果转换成布尔值，反映出是否创建成功，如果不成功的话就需要出发另一套脚本向页面中引入媒体标签，例如Flash等其他播放技术了。
也可以在audio和video元素中放入备选内容，如果浏览器不支持，他们就会显示在内容元素对应的位置，可以把以Flash插件方式播放同样的视频代码作为备选内容。
将Flash作为后备的video元素
<video src="video.webm" controls>
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="video.swf"/>
</object>
Your browser does not support HTML5 video.
</video>
如果只是想让不支持的浏览器显示一行内容就简单了
<video src="videw.webm" controls>
Your browser does not support HTML5 video.
</video>
二、媒体元素
HTML5中audio和video元素有很多相同之处，他们都支持播放、暂停、静音和消除静音、加载等。
controls告诉浏览器显示通用的用户控制，包括开始、停止、跳播以及音量控制，如果不指定controls，用户将无法播放网页上的音乐。
使用source元素，如果浏览器不支持特定的编解码器，那么就需要用到这个元素，他包含多个来源
<video src="" controls>
<source src="bach_air.ogg">
<source src="bach_air.mp3">
an audio clip from johann sebastion bach.
</video>
浏览器会按照声明顺序判断，如果支持的不止一种，那么浏览器会选择支持的第一个来源。（按照用户体验由高到底或浏览器）
自动播放--autoplay
ios不支持，会自动阻止
如果内置的控件不适应用户界面的布局，或者希望使用默认控件中没有的条件或者动作来控制音频或视频，可以借助内置的javascript函数和特性。
另外audio比vidio多了一些额外的特性
1、poster 在视频加载完成之前，代表视频内容的图片的URL地址，可以想想一下“电影海报”。该特性不仅可读，而且可以修改，一边更换图片
<video controls poster="/images/w3school.gif"> //类似于缩略图
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
2、width和height 读取或设置显示的尺寸。如果与视频大小不匹配，可能导致居中，上下或者左右出现黑色区域。
具有指定宽度和高度的视频
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
3、videoWidth
三、javascript函数和特性
方法：
load() 加载音频、视频文件，为播放做准备，通常情况下不必调用，除非是动态生成的元素，用来在播放前预加载。
play() 加载并播放音频、视频文件。
pause() 暂停
canPlayType(type) 方法浏览器是否能播放指定的音频/视频类型。
canPlayType(type)有一个特殊的用途，向动态创建的video元素中传入某段视频的MIME类型后，判断浏览器是否支持播放该类型的视频，而无需在浏览器窗口中显示任何内容
var hasVideo=!!(document.createElement('video').canPlayType('fooType')); 返回true或false
canPlayType() 方法可返回下列值之一：
●"probably" - 浏览器最可能支持该音频/视频类型
●"maybe" - 浏览器也许支持该音频/视频类型
●"" - （空字符串）浏览器不支持该音频/视频类型
所有浏览器都支持 canPlayType() 方法。
注释：Internet Explorer 8 以及更早版本不支持该方法。
参数
| 值 | 描述 |
|---|---|
| type |
规定要检测的音频/视频类型。 常用值：
常用值，包括编解码器：
注释：如果包含编解码器，则只能返回 "probably"。 |
媒体属性：
audioTracks 返回表示可用音轨的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度（以秒计）
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
src 设置或返回音频/视频元素的当前来源
startDate 返回表示当前时间偏移的 Date 对象
textTracks 返回表示可用文本轨道的 TextTrackList 对象
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
volume 设置或返回音频/视频的音量
媒体事件
abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据，但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止
用addEventListener添加
例：添加play按钮控制音频
<audio id="clickSound" loop>
<source src="z.mp3" />
</audio>
<button id="toggle" onclick="toggleSound()">play</button>
<script>
function toggleSound(){
var clickSound=document.getElementById('clickSound'); //audio
var toggle=document.getElementById('toggle'); //按钮
if(clickSound.paused){
clickSound.play();
toggle.innerHTML="Pause";
}else{
clickSound.pause();
toggle.innerHTML="Play";
}
}
</script>
自己做的一个案例：
<script>
$(function(){
var miya = {
changeClass: function (target,id) {
var className = $(target).attr('class');
var ids = document.getElementById(id);
(className == 'on')
? $(target).removeClass('on').addClass('off')
: $(target).removeClass('off').addClass('on');
(className == 'on')
? ids.pause()
: ids.play();
},
play:function(){
document.getElementById('media').play();
}
}
miya.play(); var img =new Image();
img.src = "http://img.miyabaobei.com/d1/p2/2016/03/11/4f/cb/4fcbf0d0bcf5165d2cd18a5ada001c36.jpg";
img.onload = function(){
miya.play();
} $('#audio-btn').on('click', function(){
var _this = this;
miya.changeClass(_this,'media');
}) })
</script>