本節(jié)主要內(nèi)容是HTML5的多媒體標(biāo)簽audio和video
直接步入正題，HTML5的多媒體標(biāo)簽主要有兩個(gè)video和audio叹洲，一個(gè)用來播放視頻柠硕，一個(gè)用來播放音頻。下面截圖分別列出pc和移動(dòng)端的兼容情況：
由以上截圖我們可以發(fā)現(xiàn)运提，視頻采用MP4的格式蝗柔，音頻采用MP3的格式，可以達(dá)到最優(yōu)的兼容性解決方案民泵。那么我們?cè)撊绾问褂眠@兩個(gè)標(biāo)簽?zāi)兀?br>
1.VIDEO
<video id="video" src="mp4.mp4" poster="xx.jpg" controls="controls" preload="preload" width="640" height="480" loop="loop" autoplay="autoplay">
您的瀏覽器不支持 video 標(biāo)簽癣丧。</video>
width和height來控制播放器的大小栈妆；controls可以使用瀏覽器默認(rèn)控制器的樣式胁编，也可以自定義樣式；preload預(yù)加載鳞尔；loop循環(huán)播放嬉橙；autoplay自動(dòng)播放；poster默認(rèn)封面圖寥假。
另外市框，常用的video標(biāo)簽的事件，ended播放結(jié)束觸發(fā)糕韧，play播放時(shí)觸發(fā)枫振，pause暫停時(shí)觸發(fā)，timeupdate元素的currentTime屬性表示的時(shí)間已經(jīng)改變萤彩，seeked跳躍操作完成時(shí)觸發(fā)粪滤。
<script>
var video = document.getElementById("video");
video.addEventListener('ended',function(e){
console.log("播放結(jié)束");
},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);
//移動(dòng)端如果遇到由于系統(tǒng)原因不能自動(dòng)播放的情況，我們可以采用事件觸發(fā)的形式播放乒疏。
document.addEventListener('touchstart’,function(e){
video.play();
},false);
</script>
2.AUDIO
<audio id="audio" src="mp3.mp3" controls="controls" preload="preload" loop="loop">您的瀏覽器不支持 audio標(biāo)簽额衙。</audio>
<div id="playaudio">播放音樂</div>
controls可以使用瀏覽器默認(rèn)控制器的樣式，也可以自定義樣式怕吴；preload預(yù)加載窍侧；loop循環(huán)播放；autoplay自動(dòng)播放转绷。
音頻的常用方式有：頁面加載之后播放背景音樂伟件，特定場(chǎng)景特定時(shí)間播放。
<script>
/**默認(rèn)是直接添加autoplay屬性议经，如果遇到不能自動(dòng)播放的情況
可以用touchstart觸發(fā)斧账，在微信里也可以在wx.ready()中觸發(fā)自動(dòng)播放谴返。要引入依賴的js**/
var audio = document.getElementById("id");
document.addEventListener("touchstart",function(e){
audio.play();
},false);
//or
wx.ready(function(){
audio.play();
});
//點(diǎn)擊按鈕播放
document.getElementById("playaudio",function(e){
audio.play();
},false);
//監(jiān)聽音頻播放完畢
audio.addEventListener("ended",function(e){
consoleo.log("播放完畢");
},false);
</script>
