h5-audio/video標籤

時間 2019-11-17

標籤 h5 audio video 標籤简体版

原文原文鏈接

音頻/視頻瀏覽器

基礎用法緩存

屬性app

事件ide

audio元素和video元素oop

<audio id="audio" src="./成都.mp3"></audio>post

<video id="video" src="./成都.mp4"></video>url

一些屬性spa

一、autoplay 自動播放code

<audio src="成都.mp3" autoplay></audio>視頻

二、controls 設置控件

三、preload(none/metadata/auto) 預加載，規定是否在頁面加載後載入視頻（與autoplay不能同時存在）

none 不須要加載數據

metadata 元數據諸如時長、比特率、幀大小這樣的原數據，而不是媒體內容須要加載的

auto 瀏覽器應當加載它認爲適量的媒體內容

四、loop 是否循環播放音/視頻

五、poster (video 獨有)

當視頻不可用時，使用一張圖片替代，不然是空白 <video src="成都.mp4" poster="封面.jpg" controls></video>

多類型資源

</audio>

（有時候不識別，爲了保險起見，能夠用哪一個就拿哪一個）

腳本化

var audio = document.getElementById('audio');

var audio = new Audio('./laojie.mp3');

var audio = document.createElement('video');

    <script>
        var audio = document.createElement('audio');
        audio.setAttribute('controls','controls'); //增長屬性
        audio.setAttribute('autoplat','autoplay');
        audio.loop = "loop";
        audio.src = ""; //資源路徑
        document.body.appendChild(audio);
    </script>

設置屬性

controls/loop/preload/autoplay屬性

audio.controls = true;

audio.loop = 'loop';

audio.preload = 'auto';

audio.autoplay = true;

currentSrc 資源連接，媒體數據的url地址

注意：window.onload

方法

一、play() 方法

二、pause() 方法

三、load()方法

從新加載視頻/音頻元素，用於在更改來源或其餘設置後對音頻/視頻元素進行更新

音量 volume屬性

表示播放音量，介於0(靜音)~1(最大音量)之間，默認1。

將muted屬性設置爲true則會進入靜音模式，設置爲false則會恢復以前指定的音量繼續播放。

超過範圍會報錯[0, 1]

<body>
    <audio src="" controls></audio>
    <button id="volum_add">+</button>
    <button id="volum_sub">-</button>
    <button id="play">播放</button>
    <button id="pause">暫停</button>
    <button id="reload">重播</button>
    <script>
        var audio = document.getElementsByTagName('audio')[0];
        volum_add.onclick = function(){
         if(audio.volume <=0.7){
            audio.volume += 0.3;
         }else{
             audio.volume = 1;
         }
        }
        volum_sub.onclick = function(){
           if(audio.volume >=0.3){
              audio.volume -= 0.3;
           }else{
              audio.volume = 0;
           }
        }
        play.onclick = function(){
            audio.play();
        }
        pause.onclick = function(){
           audio.pause();
        }
        reload.onclick = function(){
           audio.load();
           audio.play();
        }
    </script>

播放速率 playbackRate

用於指定媒體播放的速度。該屬性值爲1.0表示正常速度，大於1則表示」快進」，0~1之間表示」慢放"，負值表示回放。

每一個瀏覽器實現的會有差異，具體看瀏覽器實現

    <button id="add_rate">快進</button>
    <button id="sub_rate">慢放</button>

        add_rate.onclick = function(e){
           if(audio.playbackRate < 2){
              audio.playbackRate += 0.1;
           }
        }
        sub_rate.onclick = function(e){
           if(audio.playbackRate > 0.5){
              audio.playbackRate -= 0.1;
           }
        }

currentTime/duration屬性

currentTime 設置或返回音頻/視頻播放的當前位置

duration 返回當前音頻/視頻的時長(window.onload)

單位秒

played/buffered/seekable

played屬性返回已經播放(看過)的時間段，buffered屬性返回當前已經緩衝的時間段，seekable屬性則返回用戶能夠跳轉的時間段。這三個屬性都是TimeRanges對象，每一個對象都有一個length屬性以及start()和end()方法，length屬性表示當前的一個時間段，start()與end()分別返回當前時間段的起始時間點和結束時間點(單位是秒，起始參數是0)

下面代碼肯定當前緩存內容的百分比：

paused/seeking/ended （都返回布爾值）

這三個屬性用來查詢媒體播放狀態，paused爲true表示播放器暫停。seeking爲true表示播放器正在調到一個新的播放點，若是播放器播放完媒體而且停下來，則ended屬性爲true。

做爲了解

        play.onclick = function(){
           if(audio.paused){
              audio.play();
              play.innerText = '暫停'
           }else{
              audio.pause();
              play.innerText = '播放'
           }
        }    //播放、暫停一體

canPlayType()方法（看瀏覽器是否支持播放當前文件）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。