【小結】HTML5音視頻video和audio

video標簽是HTML5新增的用于定義視頻的標簽
在標簽之間放置文本內容,這樣老的瀏覽器就在訪問時就會顯示文本內容。
<video scr=data/test.mp4"">您的瀏覽器版本過低不能訪問,請升級</video>

支持格式

mp4、webm、ogv

  • safari瀏覽器和IE9以上瀏覽器只支持mp4
  • IE8以下不支持
  • IE9以上瀏覽器可以使用source標簽支持解決兼容性
<video src="data/test.webm">
    <source src="data/test.ogv">
    <source src="data/test.mp4">
您的瀏覽器版本過低不能訪問,請升級
</video>

如果播放失敗會繼續下一個,全都不行則提示文本

  • WebM由Google提出,是一個開放、免費的媒體文件格式。WebM 影片格式其實是以 Matroska(即 MKV)容器格式為基礎開發的新容器格式,里面包括了VP8影片軌和 Ogg Vorbis 音軌,其中Google將其擁有的VP8視頻編碼技術以類似BSD授權開源,Ogg Vorbis 本來就是開放格式。
    關于webm格式詳細
  • Ogg是一個自由且開放標準的容器格式,由Xiph Org 基金會所維護。Ogg格式并不受到軟體專利的限制,并設計用於有效率地串流媒體和處理高品質的數位多媒體。
    「Ogg」意指一種檔案格式,可以納入各式各樣自由和開放原始碼的編解碼器,包含音效、視訊、文字(像字幕)與後設資料的處理。
    關于ogv格式詳細

屬性

width寬度/height高度
<video controls src="data/test.mp4" width="400"></video>
<video controls src="data/test.mp4" height="400"></video>

  • 單獨設定width、hight可以直接改變播放器的寬度、高度,如果同事設定,播放器會拉伸,但是內容一個拉伸,始終在最中心

autoplay自動播放
<video controls src="data/test.mp4" autoplay></video>

  • 在谷歌下會有個小bug,還是要點,但是如果有muted屬性就可以自動播放了

loop循環播放
<video controls src="data/test.mp4" loop></video>
poster視頻未播放時顯示的圖片
<video controls src="data/test.mp4" poster="data/test.jpg"></video>
muted視頻輸出時默認被靜音
<video controls src="data/test.mp4" muted></video>

其他

谷歌瀏覽器雖然不支持直接自動播放,但是支持7秒內視頻寬高比較小的視頻自動播放
<video> 標簽支持 HTML 5 中的全局屬性
<video> 標簽支持 HTML 5 中的事件屬性


video API 事件

play()/pause()

var myVideo=document.getElementById("video1");
function playVid()
  {
  myVideo.play();
  }
function pauseVid()
  {
  myVideo.pause();
  }

使video標簽播放,但是在谷歌瀏覽器下不允許自動播放
duration
返回當前視頻的長度,以秒計

var myVideo = document.getElementById('myVideo');
    var min =parseInt(myVideo.duration/60);
    var sec =parseInt(myVideo.duration%60);

以上代碼可以將視頻長度轉化為分秒
currentTime
能返回當前視頻的一個播放長度,并且可以設定值

myVideo.currentTime = 30;//從30s的地方開始播放
    test.onclick = function(){ 
        myVideo.currentTime = myVideo.currentTime += 3;
        //給test按鈕綁定事件,按一次就快進3秒
    }

src
設置/返回當前視頻路徑
myVideo.src = 'data/test.mp4';
volume
設置/返回當前音量,0-1相當于0~100%
myVideo.volume = 1;
小案例:聲音控制條
先在body里定義一個range類型的input作為拖動控件
<input type="range" min="0" max="100" value="50" id="range">
然后在script里面綁定事件

range.oninput = function(){
        myVideo.volume = this.value/100;//value值可以在mix和max上修改
    }

control
是否顯示控制控件(播放暫停音量等)
myVideo.control = true;

  • 設置后video會自動添加control屬性

muted
手動設置靜音
myVideo.muted = true;

  • 設置后video標簽上不會自動添加muted屬性

networkState
返回視頻的當前網絡狀態(state)
返回的網絡狀態(state)碼:
0:未初始化
1:視頻資源已獲取,但是未使用
2:瀏覽器正則下載資源
3:未找到資源(有可能在加載)

  • 視頻并不是瞬間加載的,加載時網絡狀態是3(找不到)延時幾秒后獲取會變成1(已找到資源)

currentSrc
返回當前音頻的URL,無法改變URL只能返回URL
myVideo.currentSrc = 'data/test.mp4';

  • 與src不同的是,只能返回可以讀取的資源路徑,例如視頻還沒加載出來的時候返回空

ended
可以返回視頻是否播放結束的結果,如果播放結束返回true,沒有則false,可以進行事件監聽
小案例:監聽ended事件

myVideo.addEventListener('ended',function(){ //監聽ended事件
        console.log('視頻播放結束了')
        myVideo.play();//重新播放
    })

loop
設置或返回視頻是否在結束時重新播放,默認是false,如果在script中設置了loop為true,那么會自動添加loop在video標簽屬性中
小案例:循環開關

 test.onclick = function () {
        if (myVideo.loop = false){//因為默認是false
            this.innerHTML = '循環';
            myVideo.loop = true;
        }else {
            this.innerHTML = '不循環';
            myVideo.loop = false;
        }

playbackRate
設置返回視頻的播放速度,默認是1,小于1則是慢速
myVideo.playbackRate = '2';//兩倍速播放

readyState
屬性返回擋墻的就緒狀態
返回參數:
0: 沒有關于視頻就緒的信息
1:有數據,快不夠播放了
2:當前有數據可以用,但是下一幀沒有了
3:數據正在緩沖,當前和至少下一幀可以用了
4:可用數據足以開始播放了
timeupdate
當目前的播放位置更改時,可用監聽到視頻目前播放的狀態
小案例:timeupdate+duration+currentTime制作簡易播放狀態欄

myVideo.addEventListener('timeupdate',function () {
        let allTime = parseInt(myVideo.duration/60)+':'+parseInt(myVideo.duration%60);
        let nowTime = parseInt(myVideo.currentTime/60)+':'+parseInt(myVideo.currentTime%60);
    timeNode.innerHTML = nowTime+ '/' +allTime //輸出當前時間、總時間;
    })

seeked
當用戶對視頻的進度條并且已經完成操作時會觸發的事件,使用時必須用on
如:
myVideo.onseeked = function () {}

seeking
當用戶開始移動/跳躍視頻中的新位置的時候,使用時必須用on
myVideo.onseeked = function () {}

  • seeking的頻率比seeked高
    小案例:比較seeked和seeking觸發頻率
    在body定義兩個span標簽
<div>
    <span id="testSeeked">seeked</span>
    <span id="testSeeking">seeking</span>
</div>

在script中比較seeked和seeking觸發頻率

 var seekedNum = seekingNum = 0;
    myVideo.onseeked = function () {
        seekedNum ++;
        testSeeked.innerHTML = seekedNum;
    }
    myVideo.onseeking = function () {
        testSeeking.innerHTML = seekingNum;
    }

volumechange
音量更改時,使用時必須用on
myVideo.onvolumechange = function () { }
通用API:requestFullscreen
全屏顯示,但是必須在用戶事件上調用
小案例:兼容谷歌和火狐的全品顯示

test.onclick = function () {
        if (myVideo.webkitRequestFullscreen) {
            myVideo.webkitRequestFullscreen();
        }else if (myVideo.mozRequestFullscreen) {
            myVideo.mozRequestFullScreen();
        }
    }
  • 注意火狐的mozRequestFullScreen是大寫S,谷歌的是小寫
    load
    強制重新加載視頻資源
    test.onclick = function () {myVideo.load();}
  • 一般在更新視頻url后重新加載
    canplay
    視頻已經準備好開始播放,可以用于事件監聽
test.onclick = function () {myVideo.load();}
    myVideo.addEventListener('canplay',function () {
        console.log('可以開始播放了')
    })

音頻audio

音頻audio的屬性與api與視頻的video的很多都差不多,但是有一些區別

  • audio 定義音頻 格式:mp3 wav ogg
    mp3所有瀏覽器兼容
    ogg 只safari不支持

屬性:
src音頻的資源地址
controls 播放控件
autoplay 自動播放
loop 循環播放
muted 靜音

  • wav 都支持
    js 能幫助生成audio對象 new Audio(); 等同于HTML上面寫上audio標簽
    chrom和Opera都不能直接播放 需要頁面上元素交互

API:
play 音頻播放
pause 音頻暫停
duration 返回當前音頻長度
currentTime 設置或返回當前音頻的長度
src 設置/返回當前音頻的來源
volume 設置/返回當前的音頻音量
control 設置音頻是否顯示控件
muted 設置靜音
networkState 返回音頻的當前網絡狀態
currentSrc 返回當前音視頻的URL
ended 返回音視頻的播放位置是否已經結束
loop 設置是否循環播放
playbackRate 設置或返回音視頻的播放速度
readyState 屬性返回音頻當前的就緒狀態
timeupdate 當目前的音放位置已更改時
seeked 當用戶移動/跳躍到視頻中的新位置時
seeking 當用戶開始移動/跳躍到視頻中的新位置時
volumechange 當音量更改時
requestFullscreen 全屏
load 重新加載音頻資源
canplay 音頻已經準備好開始播放

  • autoplay chrom和Opera不會自動播放
    muted 靜音 loop循環播放
    width/height屬性不起作用 需要css樣式中進行設置

  • currentSrc只能獲取,不能設置

  • seeked seeking 在audio中觸發頻率相同
    timeupdate 播放時觸發的事件
    volumechange 當音量改變的時候觸發
    requestFullscreen 全屏 必須使用audio標簽 js生成的audio對象不支持
    load 重新加載的函數 重新給個src也會重新加載
    canplay 準備好的時候出發的事件

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容