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

時間  2019-11-13
標籤 html5 html 多媒體 相關 api video 欄目 HTML5 简体版
原文   原文鏈接

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

在HTML5中，新增了兩個元素---video元素與audio元素，其中video元素專門用來播放網絡上的視頻或電影，而audio元素專門用來播放網絡上的音頻數據。html

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

一：HTML5中的video標籤支持3種經常使用的視頻格式：java

一、Ogg = 帶有Theora 視頻編碼和Vorbis 音頻編碼的 Ogg 文件；web

二、MPEG4 = 帶有H.264 視頻編碼和AAC 音頻編碼的MPEG 4 文件；chrome

三、WebM = 帶有VP8 視頻編碼和Vorbis 音頻編碼的WebM 文件。瀏覽器

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

 可是咱們知道不少網絡上的視頻不是上面的三種格式，大部分是flv格式或者wav格式等，若是咱們直接使用這樣的格式的話，那麼在標準瀏覽器中使用video標籤確定不支持的，那麼如今咱們須要轉換成html5支持的格式，咱們能夠在網上下載一個轉換格式工具轉換下，我如今下載的是：Freemake video converter 下載地址是：http://www.freemake.com/free_video_converter/  以下界面ide

轉換後自動會生存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

  1. 支持H.264視頻編碼格式和vp8視頻編碼格式。
  2. 支持MP3音頻編碼格式和WAV音頻編碼格式。

Firefox4+

  1. 支持Ogg Theora視頻編碼格式和vp8視頻編碼格式。
  2. 支持Ogg vorbis音頻編碼格式和WAV音頻編碼格式。

Opera10+

  1. 支持Ogg Theora視頻編碼格式和vp8視頻編碼格式。
  2. 支持Ogg vorbis音頻編碼格式和WAV音頻編碼格式。

Chrome6+

  1. 支持H.264視頻編碼格式，Ogg Theora視頻編碼格式,vp8視頻編碼格式。
  2. 支持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個可能值：

  1. MEDIA_ERR_ABORTED(數字值爲1)，媒體數據的下載過程因爲用戶的操做緣由而被終止。
  2. MEDIA_ERR_NETWORK(數字值爲2)，確認媒體資源可用，可是在下載出現網絡錯誤，媒體數據的下載過程被停止。
  3. MEDIA_ERR_DECODE(數字值爲3)，確認媒體資源可用，可是解碼時發生錯誤。
  4. 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屬性

  1. video元素或audio元素的currentTime屬性來讀取媒體的當前播放位置(單位是s)，也能夠經過修改currentTime屬性來修改當前播放位置，若是修改的位置上沒有可用的媒體數據時，將拋出INVALID_STATE_ERR異常；
  2. 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元素有如下四種方法；

  1. play方法：使用play方法來播放媒體，自動將元素的paused屬性的值變爲false。
  2. pause方法：使用pause方法來暫停播放，自動將元素的paused屬性的值變爲true。
  3. 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參數。

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

  1. 空字符串：表示瀏覽器不支持此種媒體類型。
  2. maybe: 表示瀏覽器可能支持此種媒體類型。
  3. 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腳本中常見的獲取事件句柄的方式，以下所示：

<video id=」」 src=」」  onplay=」begin()」></video>

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 = "播放";
        }
    }

 演示以下：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程