Video/audio標簽的一些基礎使用心得

常用方法

.play（）：用於音頻視頻的播放

.pause（）：用於音頻視頻的暫停

 

常用屬性

<audio src="Batmobile Battle Mode Reveal Music.mp3" autobuffer autoplay loop controls ></audio>

durantion：獲取目標標簽的音頻視頻文件的時長

loop：設置是否循環播放，有這個標簽就循環播放

control：設置是否顯示控制組件，有這個標簽就顯示

src：設置文件路徑，可以為blob路徑，也可以為base64路徑，也可以為絕對路徑

currentTime：獲取或設置當前音頻視頻文件的播放時間

autoplay：設置是否自動播放，如果有該屬性則打開頁面時就自動播放

autobuffer：設置文件播放前是否自動緩存

 

常用事件

onloadstart：文件開始加載時觸發

oncanplay：文件加載完成可以播放時觸發

ondurationchange：文件時長發生變化時觸發

onended：文件播放結束時觸發

onplay：文件播放時觸發

ontimeupdate：文件當前播放時間（即currentTime屬性）發生變化時觸發

 

some tips：

一、duration的獲取

1.$("audio")[0].oncanplay = function(){
　　console.log($(this)[0].duration);
}

2.$("audio")[0].ondurationchange = function(){
console.log($(this)[0].duration);
}

3、console.log($("audio")[0].duration);

第三句無法獲得duration，duration獲取必須在文件加載完成后才能獲取。1,2都能獲取。所以duration一般會和oncanplay、ondurationchange搭配使用

 

二、事件都是異步的

上面代碼中，首先打印出來的是NaN，因為上面事件的完成需要一定時間，也就是關於duration的獲取和渲染到標簽中最好是在加載事件中完成，如

$("audio")[0].oncanplay = function(){
            $("textarea").val($(this)[0].duration);
        }

而不是

var time;
$("audio")[0].oncanplay = function(){
        time  = $(this)[0].duration;    
        }
$("textarea").val(time); //內容為NaN

 

三、durationchange的用法

durationchange雖然是時長改變時觸發，但是根據以下代碼：

1<audio src="Batmobile Battle Mode Reveal Music.mp3" autobuffer autoloop loop controls ></audio>

 $("audio")[0].ondurationchange = function(){
            alert(1);
        }
setTimeout(function(){
            $("audio")[0].src = "Batmobile Battle Mode Reveal Music.mp3";
        },3000);

可以輸出兩次1，也就是說只要只要文件重新加載，即便是同個文件，同樣的時長，也會觸發該事件

 

四、通過input里的file表單上傳多媒體文件給多媒體標簽

想到的方法及其可行性

1.利用jquery的val屬性直接獲取地址

<input type="file" name="" id="">
    <script type="text/javascript">
        var input = document.querySelector("input");
        input.onchange = function(){
            console.log($(this).val());
        }    
    </script>

獲得的結果是格式為  儲存盤：\fakepath\文件名稱.格式

因為瀏覽器出於安全原因不允許直接獲取本地文件，所以獲得是屏蔽了真實地址的假地址，所以該方法不可行

 

2.利用FileReader對象獲取

<input type="file" name="" id="">
    <script type="text/javascript">
        $("input")[0].onchange = function(){
            var reader = new FileReader();
            reader.readAsDataURL(this.files[0]);
            reader.onload = function(){
                console.log(reader.result);
            }
            
        }
    </script>

可以獲取文件地址base64形式（不是很了解），但是長度過長，由於是想利用localStoragr儲存，儲存不了太長，所以不可行

 

3.利用window.URL.createObjectURL()獲取

<input type="file" name="">
    <script type="text/javascript">
        $("input")[0].onchange = function(){
            var url = window.URL.createObjectURL($(this)[0].files[0]);
            console.log(url);
        }
    </script>

獲得的是blob形式的地址，但是每次重啟瀏覽器后的通個文件的blob的值是不一樣的，所以無法實現長久儲存的效果，不可行

 

4.利用瀏覽器會在標簽的地址前面自動補全當前js文件所連接的html文件的文件路徑的原理

var url = "uploadMusic/" + this.files[0].name;

直接將地址寫為html所在文件的該文件所在的子文件加名字即可，局限性：音頻視頻必須放在html同個文件夾中

 

總結：瀏覽器保存本地文件的想法不可行，因為瀏覽器要防止網頁惡意讀取用戶客戶端文件，沒有意義，玩玩還行