本节主要内容是HTML5的多媒体标签audio和video
直接步入正题，HTML5的多媒体标签主要有两个video和audio，一个用来播放视频，一个用来播放音频。下面截图分别列出pc和移动端的兼容情况：
由以上截图我们可以发现，视频采用MP4的格式，音频采用MP3的格式，可以达到最优的兼容性解决方案。那么我们该如何使用这两个标签呢？
1.VIDEO
<video id="video" src="mp4.mp4" poster="xx.jpg" controls="controls" preload="preload" width="640" height="480" loop="loop" autoplay="autoplay">
您的浏览器不支持 video 标签。</video>
width和height来控制播放器的大小；controls可以使用浏览器默认控制器的样式，也可以自定义样式；preload预加载；loop循环播放；autoplay自动播放；poster默认封面图。
另外，常用的video标签的事件，ended播放结束触发，play播放时触发，pause暂停时触发，timeupdate元素的currentTime属性表示的时间已经改变，seeked跳跃操作完成时触发。
<script>
var video = document.getElementById("video");
video.addEventListener('ended',function(e){
console.log("播放结束");
},false);
video.addEventListener('play',function(e){
console.log("开始播放");
},false);
video.addEventListener('timeupdate',function(e){
console.log("currentTime变化");
},false);
video.addEventListener('seeked',function(e){
console.log("跳跃变化");
},false);
//移动端如果遇到由于系统原因不能自动播放的情况，我们可以采用事件触发的形式播放。
document.addEventListener('touchstart’,function(e){
video.play();
},false);
</script>
2.AUDIO
<audio id="audio" src="mp3.mp3" controls="controls" preload="preload" loop="loop">您的浏览器不支持 audio标签。</audio>
<div id="playaudio">播放音乐</div>
controls可以使用浏览器默认控制器的样式，也可以自定义样式；preload预加载；loop循环播放；autoplay自动播放。
音频的常用方式有：页面加载之后播放背景音乐，特定场景特定时间播放。
<script>
/**默认是直接添加autoplay属性，如果遇到不能自动播放的情况
可以用touchstart触发，在微信里也可以在wx.ready()中触发自动播放。要引入依赖的js**/
var audio = document.getElementById("id");
document.addEventListener("touchstart",function(e){
audio.play();
},false);
//or
wx.ready(function(){
audio.play();
});
//点击按钮播放
document.getElementById("playaudio",function(e){
audio.play();
},false);
//监听音频播放完毕
audio.addEventListener("ended",function(e){
consoleo.log("播放完毕");
},false);
</script>
