本节主要内容是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>