Html5多媒體相關的API---video

龍恩0707發表於2015-05-06

原文網址 : https://www.cnblogs.com/tugenhua0707/p/4480715.html

HTMLAPIIDE

在HTML5中，新增了兩個元素---video元素與audio元素，其中video元素專門用來播放網路上的視訊或電影，而audio元素專門用來播放網路上的音訊資料。

我們先來看看video元素的相關知識點。

一：HTML5中的video標籤支援3種常用的視訊格式：

1、Ogg = 帶有Theora 視訊編碼和Vorbis 音訊編碼的 Ogg 檔案；

2、MPEG4 = 帶有H.264 視訊編碼和AAC 音訊編碼的MPEG 4 檔案；

3、WebM = 帶有VP8 視訊編碼和Vorbis 音訊編碼的WebM 檔案。

瀏覽器支援程度：safari3+，firefox4+，Opera10+，chrome3+，IE9+等。

但是我們知道很多網路上的視訊不是上面的三種格式，大部分是flv格式或者wav格式等，如果我們直接使用這樣的格式的話，那麼在標準瀏覽器中使用video標籤肯定不支援的，那麼現在我們需要轉換成html5支援的格式，我們可以在網上下載一個轉換格式工具轉換下，我現在下載的是：Freemake video converter 下載地址是：http://www.freemake.com/free_video_converter/ 如下介面

轉換後自動會生存HTML5中支援的三種格式，然後我們在頁面上這樣使用即可：

<video id=XX controls width=640 height=360 autoplay>
    <source src="a/a.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="a/a.webm" type='video/webm' >
    <source src="a/a.mp4" type='video/mp4'>
</video>

傳統的video使用方法是：<video width=”” height=”” src=””></video>,

音訊的使用方法如下：<audio src=””></audio>

但是我們可以通過上面的source元素為同一個媒體資料指定多個播放格式與編碼方式，以確保瀏覽器可以從中選擇一種自己支援的播放格式進行播放，瀏覽器選擇的順序為程式碼中的書寫順序，從上往下判斷自己對該播放的格式是否支援，直到選擇自己支援的播放格式為止。

source有幾個屬性，src屬性是指播放媒體的url地址，type表示媒體型別，其屬性值為播放檔案的MIME型別，該屬性中的code參數列示所使用的媒體的編碼格式。type屬性是可選的，但是最好不要省略type屬性，否則瀏覽器會從上往下選擇時無法判斷自己能不能播放而先行下載一小段視訊(或音訊)資料，這樣就有可能浪費頻寬和時間了。

下面來看看瀏覽器對編碼格式的支援情況；

IE9

支援H.264視訊編碼格式和vp8視訊編碼格式。
支援MP3音訊編碼格式和WAV音訊編碼格式。

Firefox4+

支援Ogg Theora視訊編碼格式和vp8視訊編碼格式。
支援Ogg vorbis音訊編碼格式和WAV音訊編碼格式。

Opera10+

支援Ogg Theora視訊編碼格式和vp8視訊編碼格式。
支援Ogg vorbis音訊編碼格式和WAV音訊編碼格式。

Chrome6+

支援H.264視訊編碼格式，Ogg Theora視訊編碼格式,vp8視訊編碼格式。
支援Ogg vorbis音訊編碼格式和MP3音訊編碼格式。

Video標籤新增屬性如下：

屬性	值	描述
src	url	要播放的媒體資料url地址
autoplay	autoplay	媒體自動播放
controls	controls	是否為視訊或音訊新增瀏覽器自帶的播放用的控制條，控制條中具有播放，暫停等按鈕
height(video獨有)	pixels	視訊的高度
loop	loop	是否迴圈播放視訊或者音訊
preload	none,metadata,auto,預設值為auto	視訊或音訊資料是否預載入，如果使用預載入，瀏覽器會預先將視訊或音訊資料進行緩衝。 none:不進行預載入。 metadata:只有預載入媒體的後設資料(媒體位元組數，第一幀，播放列表，持續時間等)。 auto:預載入全部視訊或者音訊
width(video獨有)	pixels	視訊的寬度
poster(video獨有)	<video src=”” poster=”xx.jpg”></video>	視訊不可用的時候，可以使用該元素向使用者展示一副替代用的圖片

error屬性：在正常讀取時候，使用媒體資料的過程中，video元素或audio元素的error屬性為null，但是任何時候只要出現錯誤，error屬性將返回一個MediaError物件，該物件的code返回對應的錯誤狀態，共有4個可能值：

MEDIA_ERR_ABORTED(數字值為1)，媒體資料的下載過程由於使用者的操作原因而被終止。
MEDIA_ERR_NETWORK(數字值為2)，確認媒體資源可用，但是在下載出現網路錯誤，媒體資料的下載過程被中止。
MEDIA_ERR_DECODE(數字值為3)，確認媒體資源可用，但是解碼時發生錯誤。
MEDIA_ERR_SRC_NOT_SUPPORTED(數字值為4)，媒體資源不可用或媒體格式不被支援。

程式碼如下：

<video src="" id="videoElement"></video>
var video = document.getElementById("videoElement");
video.addEventListener('error',function(){
    var error = video.error;
    swicth(error.code) {
        case 1:
           alert("視訊的下載過程被中止");
        break;

        case 2:
           alert("網路發生故障，視訊的下載過程被中止");
        break;

        case 3:
           alert("解碼失敗");
        break;

        case 4:
           alert("媒體資源不可用或媒體格式不被支援");
        break;
    }
},false);

networkState屬性

在媒體資料載入過程中可以使用video元素或audio元素的networkState屬性讀取當前網路狀態，共有4個可能的值；

1． NETWORK_EMPTY（數字值為0）：元素處於初始狀態。

2． NETWORK_IDLE(數字值為1)，瀏覽器已選擇好用什麼編碼格式來播放媒體，但是尚未建立網路連線。

3． NETWORK_LOADING(數字值為2)：媒體資料載入中

4． NETWORK_NO_SOURCE(數字值為3)，沒有支援的編碼格式，不執行載入。

currentTime屬性與duration屬性

video元素或audio元素的currentTime屬性來讀取媒體的當前播放位置(單位是s)，也可以通過修改currentTime屬性來修改當前播放位置，如果修改的位置上沒有可用的媒體資料時，將丟擲INVALID_STATE_ERR異常；
video元素或audio元素的duration屬性來讀取媒體檔案總的播放時間。

我們可以來做demo如下：

HTML程式碼如下：

<video id="video" controls width=640 height=360 autoplay>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="Wildlife/Wildlife.webm" type='video/webm' >
    <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
    <p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="getCurTime()" type="button">獲得當前時間的位置</button>
<button onclick="setCurTime()" type="button">把時間位置設定為 5 秒</button>
<button onclick="duration()" type="button">讀取媒體檔案總的播放時間</button>

JS程式碼如下：

var myVid=document.getElementById("video");
function getCurTime(){ 
    // 獲得當前視訊或者音訊時間的位置
    alert(myVid.currentTime);   
} 
function setCurTime(){ 
// 給當前的視訊或者音訊設定5s時間的位置
    myVid.currentTime=5;        
} 
function duration() {
    //讀取媒體檔案總的播放時間 單位為S
    alert(myVid.duration); 
}

大家可以複製程式碼，換一張視訊地址就可以看到效果了~；

played屬性，paused屬性與ended屬性

played：video元素或audio元素的played屬性來返回一個TimeRanges物件，從該物件中可以讀取媒體檔案的已播放部分的時間段。開始時間為已播放部分的開始時間，結束時間為已播放部分的結束時間。

paused屬性：使用video元素或audio元素的paused屬性來返回一個布林值，表示是否處於暫停播放中，true表示媒體暫停播放，false表示媒體正在播放；

ended屬性：使用video元素或audio元素的ended屬性來返回一個布林值，表示是否播放完畢，true表示媒體播放完畢，false表示媒體還沒有播放完畢。

HTML程式碼如下：

<video id="video" controls width=640 height=360 autoplay loop>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="Wildlife/Wildlife.webm" type='video/webm' >
    <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
    <p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="played()" type="button">讀取媒體檔案的已播放部分的時間段</button>
<button onclick="paused()" type="button">是否處於暫停播放</button>
<button onclick="ended()" type="button">是否播放完畢</button>

JS程式碼如下：

var myVid=document.getElementById("video");
function played() {
    //讀取媒體檔案的已播放部分的時間段
    console.log(myVid.played);
}
function paused() {
    // 是否處於暫停播放
    alert(myVid.paused);
}
function ended() {
    // 是否播放完畢
    alert(myVid.ended);
}

console.log(myVid.played);列印如下：

defaultPlaybackRate屬性與playbackRate屬性

defaultPlaybackRate屬性：可以使用video元素或者audio元素的defaultPlaybackRate屬性讀取或修改媒體預設的播放速率。

playbackRate屬性：可以使用video元素或者audio元素的playbackRate屬性讀取或修改媒體當前的播放速率。

volume屬性與muted屬性

volume屬性：使用video元素或audio元素的volume屬性讀取或修改媒體的播放音量，範圍為0到1,0為靜音，1為最大音量。

muted屬性：使用video元素或audio元素的muted屬性讀取或修改媒體的靜音狀態，該值為布林值，true表示處於靜音狀態，false表示處於非靜音狀態。

HTML程式碼如下：

<video id="video" controls width=640 height=360 autoplay loop>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="Wildlife/Wildlife.webm" type='video/webm' >
    <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
    <p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="volume()" type="button">讀取或修改媒體的播放音量</button>
<button onclick="muted()" type="button">讀取或修改媒體當前的靜音狀態</button>

JS程式碼如下：

var myVid=document.getElementById("video");
function volume(){
    // 讀取或修改媒體的播放音量
    myVid.volume = 0.1;
}
function muted() {
    //讀取或修改媒體當前的靜音狀態
    myVid.muted = true;
}

大家可以使用下，當我點選”讀取或修改媒體的播放音量”按鈕時候，聲音會變的很小，當我點選”讀取或修改媒體當前的靜音狀態”按鈕時候，視訊完全就沒有聲音。

二：方法

video元素與audio元素有以下四種方法；

play方法：使用play方法來播放媒體，自動將元素的paused屬性的值變為false。
pause方法：使用pause方法來暫停播放，自動將元素的paused屬性的值變為true。
load方法，使用load方法來重新載入媒體進行播放，自動將元素的playbackRate屬性的值變為defaultPlaybackRate屬性的值，自動將元素的error的值變為null。

下面是播放和暫停的demo如下：

<video id="video" controls width=640 height=360>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="Wildlife/Wildlife.webm" type='video/webm' >
    <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
    <p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="play()">播放</button>
<button onclick="pause()">暫停</button>

JS程式碼如下：

var myVid=document.getElementById("video");
// 監聽視訊播放結束的事件
myVid.addEventListener("ended",function(){
    alert("播放結束");
},true);
// 發生錯誤
myVid.addEventListener('error',function(){
    switch(myVid.error.code) {
        case 1: 
          alert("視訊的下載過程被中止");
        break;

        case 2:
              alert("網路發生故障，視訊的下載過程被中止");
        break;

        case 3:
              alert("解碼失敗");
        break;

        case 4:
              alert("不支援播放的視訊格式");
        break;

        default:
              alert("發生未知錯誤");
        }
},false);

function play() {
    // 播放視訊
    myVid.play();
}
function pause() {
    // 暫停播放
    myVid.pause();
}

如上程式碼，預設的情況下是不自動播放，當我點選播放按鈕時候，就播放，當我點選暫停按鈕時候就停止當前的播放。

4. canPlayType方法：使用canPlayType方法來測試瀏覽器是否支援指定的媒體型別，該方法定義如下：var support = videoElement.canPlayType(type);

videoElement表示頁面上的video元素或audio元素，該方法使用一個引數type，該引數的指定方法與source元素的type引數的指定方法相同，用播放檔案的MIME型別來指定，可以在指定的字串中加上表示媒體編碼格式的codes引數。

該方法可能返回的值如下所示：

空字串：表示瀏覽器不支援此種媒體型別。
maybe: 表示瀏覽器可能支援此種媒體型別。
probably：表示瀏覽器確定支援此種媒體型別。

HTML程式碼如下：

<video id="video" controls width=640 height=360>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="Wildlife/Wildlife.webm" type='video/webm' >
    <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
    <p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="canPlayType()">canPlayType方法</button>

JS程式碼如下：

var myVid=document.getElementById("video");
function canPlayType() {
    var support = myVid.canPlayType("video/webm");
    console.log(support); // maybe

    var support = myVid.canPlayType('video/ogg; codecs="theora, vorbis');
    console.log(support); // probably
}

三：事件

1. 事件處理方式

使用video元素或audio元素的事件方式有2種，第一種是監聽的方式，使用video元素或audio元素的addEventListener方法來對事件的發生進行監聽，該方法定義如下：

videoElement.addEventListener(type,listener,userCapture);

如上的監聽方式和我們的JS的監聽的方式一樣，不做詳細介紹，我們來看看第二種事件監聽方式是為javascript指令碼中常見的獲取事件控制程式碼的方式，如下所示：

function begin(){}

2. 事件介紹

Video元素與audio元素的相關事件

事件	描述
loadstart	瀏覽器開始在網上尋找媒體資料
progress	瀏覽器正在獲取媒體資料
suspend	瀏覽器暫停獲取媒體資料，但是下載過程中並沒有正常結束
abort	瀏覽器在下載完全部媒體資料之前中止獲取媒體資料，但是並不是由錯誤引起的
error	獲取媒體資料過程中出錯
emptied	暫不考慮，可以網上看
stalled	瀏覽器嘗試獲取媒體資料失敗
play	即將開始播放，當執行了play方法時觸發，或資料下載後元素被設為autoplay
pause	播放暫停，當執行了pause方法觸發
loadedmetadata	瀏覽器獲取完媒體的時長和位元組數
loadeddata	瀏覽器已載入完畢當前播放位置的媒體資料，準備播放
waiting	可以暫不看
playing	正在播放
canplay	瀏覽器能夠播放媒體，但估計以當前播放速率不能直接將媒體播完，播放期間需要緩衝
canplaythrough	瀏覽器能夠播放媒體，但估計以當前播放速率能將媒體播完，不再需要緩衝
seeking	Seeking變為true，表示瀏覽器正在請求資料
seeked	Seeking屬性變為false，表面瀏覽器停止請求資料
timeupdate	當前播放位置發生改變，可能是播放過程中的自然改變，也可能是人為改變，或由於播放不能連續而發生的跳變。
ended	播放結束後停止播放
ratechange	DefaultplaybackRate屬性或playbackRate屬性發生改變
durationchange	播放時長髮生改變
volumechange	volume屬性或muted屬性發生改變

下面我們來看個demo,在播放過程中會經常觸發timeupdate事件來通知當前播放位置的改變，我們下面來看看timeupdate事件來顯示當前的播放進度。

HTML程式碼如下：

<video id="video" controls width=640 height=360 autoplay loop="loop"></video>
<br/>
視訊地址：<input type="text" id="videoUrl"/>
<input id="playButton" type="button" onclick="playOrPauseVideo()" value="播放"/>
<span id="time"></span>

JS程式碼如下：

function playOrPauseVideo(){
    var videoUrl = document.getElementById("videoUrl").value;
    var video = document.getElementById("video");
    //使用事件監聽方式撲捉事件
    video.addEventListener('timeupdate',function(){
        var timeDisplay = document.getElementById("time");
        // 使用秒數來顯示當前播放進度
        timeDisplay.innerHTML = Math.floor(video.currentTime) + "/" + Math.floor(video.duration) + "(秒)";
        },false);
    if(video.paused) {
        if(videoUrl != video.src) {
            video.src = videoUrl;
            video.load();
        }else {
            video.play();
        }
        document.getElementById("playButton").value = "暫停";
        }else {
            video.pause();
            document.getElementById("playButton").value = "播放";
        }
    }

演示如下：

Android多媒體之Camera的相關操作
2019-01-08
Android
Android多媒體之Camera2的相關操作
2019-03-04
Android
HTML5 之多媒體
2019-03-22
HTML
如何運營好技術相關的自媒體？
2022-07-01
使用Html5 多媒體實現微信語音功能
2018-12-08
HTML
多媒體的格式
2020-12-15
自媒體多平臺同步，自媒體多平臺分發，自媒體多平臺管理
2020-08-31
HTML5應用 + Cordova = 平臺相關的混合應用
2018-09-09
HTML
HTML5應用+Cordova=平臺相關的混合應用
2018-09-09
HTML
多媒體互動展廳設計中的多媒體應用一般都有哪些？
2021-12-07
多執行緒相關整理
2020-09-30
執行緒
結構體相關
2021-04-17
結構體
014---多媒體標籤
2018-04-10
Emby for Mac多媒體影音庫
2021-02-19
Mac
自媒體多平臺管理軟體，管理30+自媒體平臺，一鍵多發
2020-07-08
自媒體多平臺釋出，自媒體多平臺一鍵釋出工具
2020-08-24
Wireshark在多媒體開發中的使用
2024-03-15
關於流媒體的效能測試
2020-08-04
HTML5的新特性——語義化標籤、多媒體標籤（video、audio）、input型別、表單屬性
2020-12-15
HTMLIDE型別
多執行緒相關問題
2018-05-16
執行緒
直播預告|OpenHarmony標準系統多媒體子系統之相機解讀
2022-05-31
GStreamer跨平臺多媒體框架
2020-12-29
框架
golang的記憶體相關內容
2020-12-03
Golang記憶體
前端Html5（2）之多媒體音訊視訊標籤
2019-03-04
前端HTML音訊
新華多媒體：2018-2019網路“黑公關”研究報告
2019-12-01
新媒體運營發展方向多嗎？影片新媒體剪輯軟體
2021-03-17
直播預告丨 OpenHarmony 標準系統多媒體子系統之相機解讀
2022-05-25
Java多執行緒相關知識
2018-12-27
Java執行緒
媒小幫是怎麼管理多個平臺的自媒體賬號的？
2021-04-29
HarmonyOS開發例項：【相機和媒體庫】
2024-04-22
一鍵釋出多平臺自媒體，把內容釋出到多個自媒體平臺
2020-06-30
資料分析相關軟體
2018-11-01
記憶體優化相關
2019-07-23
記憶體優化
除了音訊和影片，HTML5還支援哪些媒體標籤？
2024-11-25
音訊HTML
Android多媒體之認識MP3與內建媒體播放（MediaPlayer）
2019-01-04
Android
淺談軟體效能提升相關的概念
2022-03-31
一個Vue媒體多段裁剪元件
2019-02-25
Vue元件
Android入門（十六）：手機多媒體
2018-09-21
Android
Android車載多媒體與MediaSession框架
2022-06-17
AndroidSession框架

Html5多媒體相關的API---video

相關文章