Video：載入視訊

audio：載入音訊

object，embed：載入flash等（隨著h5的普及，flash已經開始逐漸退出舞臺了）

iframe：載入資源

video

基本用法

<video src="" controls>您的瀏覽器不支援內嵌視訊</video>

poster

設定poster之後，當用戶開啟頁面，到未播放視訊時，瀏覽器介面顯示的圖片

不同的環境配置不同的媒體資源

目前原生的H5支援多媒體格式主要有mp4,ogg,webm,m3u8，不同的媒體編碼格式存在專利和產權的問題，所以不同瀏覽器對媒體的格式支援也不同，具體檢視MDN

因此，在video標籤內巢狀多個source標籤達成不同的相容環境

        <video controls>
            <source src="" type="video/mp4">
                <source src="" type="video/webm">
            您的瀏覽器不支援內嵌視訊
        </video>
 

常用方法

canPlayType：檢測瀏覽器是否能播放不同型別的視訊

返回值：

Probably：瀏覽器最可能支援

maybe：瀏覽器可能支援

空字串：瀏覽器不支援

paly：開始播放

pause：暫停播放

let video=document.getElementBy('aa');
video.play();
video.pause();

常用事件

除了支援click，mouseover等常用事件外，還有一些專屬的事件

示例，在載入到能播放時播放

            let a=document.getElementById('aa');
            a.addEventListener('canplay',function(){
                a.play()
            })

常用屬性

currentTime：當前播放到的時間

currentSrc：當前視訊地址

controls：是否展示控制元件

duration：視訊長度

played：已經播放過時間範圍區間

audio

基本用法

<audio src="" controls>您的瀏覽器不支援內嵌音訊</audio >

也可以通過內嵌source來支援不同瀏覽器播放不同格式的音訊

常用方法

canPlayType：檢測瀏覽器是否能播放不同型別的音訊

返回值：

Probably：瀏覽器最可能支援

maybe：瀏覽器可能支援

空字串：瀏覽器不支援

paly：開始播放

pause：暫停播放

常用事件

除了支援click，mouseover等常用事件外，還有一些專屬的事件

常用屬性

currentTime：當前播放到的時間

currentSrc：當前視訊地址

controls：是否展示控制元件

duration：音訊長度

played：已經播放過時間範圍區間

        <input id="input" type="file" accept=".mp3,.ogg">
        <audio controls id="aa">
            您的瀏覽器不支援內嵌視訊
        </audio>
        <script>
            let input=document.getElementById('input');
            let audio=document.getElementById('aa');
            let lastSrc='';

            input.addEventListener('change',function (event) {
               let file= event.target.files[0];
               if(file){
                   if(lastSrc){
                       URL.revokeObjectURL(lastSrc);
                   }
                   let src=URL.createObjectURL(file);
                   lastSrc = src;
                   audio.setAttribute('src',src);
                   audio.play();
               } 
            });
        </script>

createObjectURL()，該方法接受一個File物件或者Blob物件，建立一個指向該引數物件的URL

revokeObjectURL()，通過createObjectURL()建立的URL會一直儲存在瀏覽器上，為了減少瀏覽器的記憶體使用，我們需要釋放一個通過URL.createObjectURL()建立的物件URL，這邊也就是賦值的lastSrc，通過釋放這個URL減少，記憶體的使用