碼上歡樂
相關內容    簡體    繁體

HTML5中Video和Audio

本文轉載自   查看原文   2016-11-26 19:05   3711 

相關屬性

src屬性

該屬性指定媒體數據的URL地址。

autoplay屬性

在該屬性中指定是否在頁面加載后自動播放，使用方法：

  1. <video src="test.mov" autoplay></video>

preload屬性

在該屬性中指定視頻或音頻數據是否預加載。如果使用預加載的話，瀏覽器會預先將視頻或音頻進行緩沖，這樣可
以加快播放的速度，因為播放時數據已經預先緩沖完畢。

該性情有三個可選值：none,metadata與auto,默認值為auto.

  • none表示不進行預加載。
  • metadata表示只預加載媒體的元數據（媒體字節數、第一幀、播放列表、持續時間等）。
  • auto表示預加載全部視頻或音頻。

該屬性的使用方法

  1. <video src="test.mov" preload="auto"></video>

poster (video元素獨有屬性）

當視頻的不可用時，可以使用該元素向用戶展示一幅替代用的圖片，使用方法：

  1. <video src="test.mov" poster="CannotUse.jpg"></video>

loop屬性

在該屬性中指定是否循環播放視頻或音頻，使用方法：

  1. <video src="test.mov" autuplay loop></video>

controls屬性

該屬性中指定是否為視頻或音頻添加瀏覽器自帶的播放用的控制條。控制條中具有播放、暫停等按鈕。

  1. <video src="test.mov" controls></video>

開發者也可以在腳本中自定義控制條，而不使用瀏覽器默認的控制條。

with與height(video獨有屬性)

在該屬性中指定視頻的寬度與高度（以像素為單位）使用方法：

  1. <video src="test.mov" width="500" height="300"></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）：媒體格式不被支持。
  • error為只讀屬性。

讀取錯誤狀態的代碼如下：

  1. <video id="videoElement" src="test.mov">
  2. <script>
  3. var video = document.getElementById("videoElement");
  4. video.addEventListener("error", function()
  5. {
  6. var error=video.error;
  7. switch(error.code)
  8. {
  9. case 1:
  10. alert("視頻的下載過程被中止。");
  11. break;
  12. case 2:
  13. alert("網絡發生故障，視頻的下載過程被中止。");
  14. break;
  15. case 3:
  16. alert("解碼失敗。");
  17. break;
  18. case 4:
  19. alert("不支持播放的視頻格式。");
  20. break;
  21. }
  22. },false);
  23. </script>

networkState屬性

在媒體數據加載過程中可以使用networkState屬性讀取當前的網絡狀態，共有如下所示的4個可能值：

  • NETWORK_EMPTY（數字值為0）：元素牌初始狀態。
  • NETWORK_IDLE（數字值為1）：瀏覽器已選擇好用什么編碼格式來播放媒體，但尚未建立網絡連接。
  • NETWORK_LOADING（數字值為2）：媒體數據加載中。
  • NETWORK_NO_SOURCE（數字值為3）：沒有支持的編碼格式，不執行加載。
  • error為只讀屬性。

讀取錯誤狀態的代碼如下：

  1. <video id="videoElement" src="test.mov">
  2. <script>
  3. var video = document.getElementById("videoElement");
  4. video.addEventListener("progess", function(e)
  5. {
  6. var networkStateDisplay = document.getElementById("networkState");
  7. //根據networkState屬性的值來執行處理
  8. if(video.networkState == 2)
  9. {
  10. //計算已加載的字節數與總字節數。
  11. networkStateDisplay.innerHTML = "加載中...[" + e.loaded + "/" + e.total + "bype]";
  12. }
  13. else if(video.networkState == 3)
  14. {
  15. networkStateDisplay.innerHTML = "加載失敗";
  16. }
  17. },false);
  18. </script>

currentSrc屬性

可以使用currentSrc屬性來讀取播放中媒體數據的URL地。
currentSrc屬性為只讀屬性。

buffered屬性

可以使用video元素或audio元素的buffered屬性來返回一個對象，該對象實現TimeRanges接口，以確認瀏覽器是否已緩存媒體數據。TimeRanges對象表示一段時間范圍，在大多數情況下，TimeRanges對象表示的時間范圍是一個單一的以0開始的范圍，但是如果瀏覽器發出Range Requests請求，這時TimeRanges對象表示的時間范圍是多個時間范圍。

TimeRanges對象對象具有一個length屬性，表示有多少個時間范圍，大多數情況下存在時間范圍是，該值為1；不存在時間范圍是，該值為0。TimeRanges對象還具體兩個方法，TimeRanges.start(index)與TimeRanges.end(index)，大多數情況下將index值設為0就可以了。當用videoElement.buffered語句來實現TimeRanges接口時，TimeRanges.start(0)表示當前緩存區內從媒體數據的什么時間開始進行緩存，TimeRanges.end(0)表示當前緩存區內的結束時間。

readyState屬性

可以使用video元素或audio元素的readyState屬性返回媒體當前播放位置的就緒狀態，共有5個可能的值。

  • HAVE_NOTHING（數字值為0）：沒有獲取到媒體的任何信息，當前播放位置沒有可播放數據。
  • HAVE_METADATA（數字值為1）：已經獲取到足夠的媒體數據，但是當前播放位置沒有有效的媒體數據（也就是說，獲取到的媒體數據無效，不能播放）。
  • HAVE_CURRENT_DATA（數字值為2）：當前播放位置已經有數據可以播放，但沒有獲致到可以讓播放器前進的數據。當媒體為視頻時，意思是當前帖的數據已獲取，但沒有獲取到下一幀的數據，或者當前幀已經是播放的最重一幀。
  • HAVE_FUTURE_DATA（數字值為3）：當前播放位置已經有數據可以播放，而且也獲取到了可以讓播放器前進的數據。當媒體為視頻時，意思是當前幀的數據已獲取，而且也獲取到了下刺目販數據，當前幀是播放的最后一幀時，readyState屬性不可能為HAVE_FUTURE_DTAT。
  • HAVE_ENOUGH)DATA（數字值為4）：當前播放位置已經有數據可以播放，同時也獲取到了可以讓播放器前進的數據，而且瀏覽器確認媒體以某一種速度進行加載，可以保證有足夠的后續數據進行播放。

readyState屬性為只讀屬性。

seeking屬性與seekable屬性

可以使用video元素或audio元素的seeking屬性返回一個布爾值，表示瀏覽器是否正在請求某一特定播放位置的數
據，true表示瀏覽器正在請求數據，false表示瀏覽器已停止請求。

可以使用video元素或audio元素的seekable屬性來返回一個TimeRanges對象，該對象表示請求到的數據時間范圍。

當媒體為視頻時，開始時間為請求到視頻數據的第一幀的時間，結束時間為請求到視頻數據的最后一幀的時間。

seeking屬性與seekable屬性只讀屬性

currentTime屬性、startTime屬性與duration屬性

可以使用video元素或audio元素的currentTime屬性來讀取媒體的當前播放位置，也可以通過修改currentTime性情
為修改當前的播放位置。如果修改的位置上沒有可用的媒體數據時，將拋出INVALID_STATE_ERR異常；如果修改的
位置超出了瀏覽器在一次請求中可以請求的數據范圍，將拋出INDEX_SIZE_ERR異常。

可以使用video元素或audio元素的startTime屬性來讀取媒體播放的開始時間，通常為0。

可以使用video元素或audio元素的dutation屬性來讀取媒體文件總的播放時間。

三者的時間、單位均為秒，currentTime為可讀與屬性，其余兩個均為只讀屬性。

played屬性、paused屬性、ended屬性

可以使用video元素或audio元素的played屬性來返回一個TimeRanges對象，該對象中可以讀取媒體文件的已播放部份的時間段。開始時間為已播放部份的開始時間，結束時間為已播放部份的結束時間。

可以使用video元素或audio元素的paused屬性來返回一個布爾值檢測是否處於暫停狀態，true表示暫停播放，
false表示正在播放。

可以使用video元素或audio元素的end屬性來返回一個布爾值檢測是否播放完畢，true表示已播放完畢，false表示
還未播放完畢。

三者均為只讀屬性。

defaultPlayRate屬性與playbackRate屬性

defaultPlayRate屬性讀取或修改媒體的播放速率。

playbackRate屬性讀取或修改媒體當前的播放速率。

volume屬性和muted屬性

volume屬性讀取或修改媒體的的播放音量，范圍從0到1，0為表單，1為最大音量。

muted屬性讀取或修改媒體的表單狀態，該值為布爾值，true表示靜音狀態，false表示非靜音狀態。

 

相關事件

在利用video元素或audio元素讀取或播放媒體數據的時候，會觸發一系的事件，如果使用JavaScript腳本來捕捉這些事件，就可以對這些事件進行處理了。對這些事件的捕捉及處理，可以按兩種方式來進行。

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

videoElement.addEventListener ( type,listener,useCapture);

videoElement表示頁面上的video元素或audio元素。type為事件名稱，listener表示綁定的函數，useCapture是一個布爾值，表示該事件的響應順序，該值如果為true，則瀏覽器采用Capture（捕獲）響應方式，如果為false，瀏覽器采用bubbing（冒泡）響應方式，一般采用fase，默認情況下也為false，如下使用方法。

  1. video.addEventListener("error",function(){
  2. /******代碼段******/
  3. },false);

第二種事件處理方式為JavaScript腳本常見的獲取事件句柄的方式，如下例所示。

  1. <video id="video1" src="test.mov" onplay="begin_playing();"></video>
  2. function begin_playing(){
  3. /******代碼段******/
  4. }

事件介紹

事件 描述
loadstart 瀏覽器開始在網上尋找媒體數據
progress 瀏覽器正在獲取媒體數據
suspend 瀏覽器暫停獲取媒體數據，但是下載過程並滑正常結束
abort 瀏覽器在下載完全部媒體數據之前中止獲取媒體數據，但是並不是由錯誤引起的
error 獲取媒體數據過程中出錯
emptied video元素或audio元素所在網絡突然變為未初始化狀態可能原因有兩個:1.載入媒體過程中突然發生一個致命錯誤

 

2.在瀏覽器正在選擇支持的播放格式時，又調用 了load方法重新載入媒體
stalled 瀏覽器嘗試獲取媒體數據失敗
play 即將開始播放，當執行了play方法時觸發，或數據下載后元素被設為autoplay屬性
pause 播放暫停，當執行了pause方式時觸發
loadedmetadata 瀏覽器獲取完畢媒體的時間長和字節數
waiting 播放過程由於得不到下一幀而暫停播放（例如下一幀尚未加載完畢），但很快就能夠得到下一幀
canplay 瀏覽器能夠播放媒體，但估計以當前的播放速率不能直接播放完畢，播放期間需要緩沖
canplaythrough 瀏覽器能夠播放媒體，而且以當前播放速率能夠將媒體播放完畢，不再需要進行緩沖
seeking seeking屬性變為true，瀏覽器正在請求數據
seeked seeking屬性變為false，瀏覽器停止請求數據
timeupdate 由於播放位置被改變，可能是播放過程中的自然改變，也可能是被人為的改變，或由於播放不能連續而發生的跳變
ended 播放結束后停止播放
ratechange defaultplaybackRate屬性（默認播放速率）或playbackRate屬性（當前播放速率）被改變
druationchange 播放時長被改變
volumechange volume屬性（音量）被改變或muted屬性（靜音狀態）被改變

事件捕捉示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>事件捕捉</title>
  6. <script type="text/javascript">
  7. function playOrPauseVideo(){
  8. var videoUrl = document.getElementById("videoUrl").value;
  9. var video = document.getElementById("video");
  10. //使用事件監聽方式捕捉事件
  11. video.addEventListener("timeupdate",function(){
  12. var timeDisplay = document.getElementById("time");
  13. //用秒數來顯示當前播放進度
  14. timeDisplay.innerHTML = Math.floor(video.currentTime) + "/" + Math.floor(video.duration) + " 秒";
  15. },false);
  17. if(video.paused){
  18. if(videoUrl != video.src){
  19. video.src = videoUrl;
  20. video.load();
  21. }else{
  22. video.play();
  23. }
  24. document.getElementById("playButton").value= "暫停";
  25. }else{
  26. video.pause();
  27. document.getElementById("playButton").value = "播放";
  28. }
  29. }
  30. </script>
  31. </head>
  32. <body>
  33. <video id="video" width="400" height="300" autoplay loop="loop"></video>
  34. <br/>
  35. 視頻地址：<input type="text" id="videoUrl"/>
  36. <input type="button" id="playButton" onClick="playOrPauseVideo()" value="播放"/>
  37. <span id="time"></span>
  38. </body>
  39. </html>

我們看一個事件捕捉示例，在播放過程中會經常觸發timeupdat事件來通知當前的播放位置的改變，在該示例中，我們捕捉這個timeupdate事件來顯示當前的播放進度。

 

相關方法

play方法

使用play方法來播放媒體，自動將元素的paused屬性變為false。

pause方法

使用pause方法來暫停播放，自動將元素的paused屬性變為true。

load方法

使用load方法來重新載入媒體進行播放，自動將元素的playbackRate屬性值變為defaultPlaybackRate屬性的值，自動將元素的error的值變為null.

下面先來看一個媒體播放的示例。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>video test</title>
  6. <script type="text/javascript">
  7. var video;
  8. function init(){
  9. video = document.getElementById("video1");
  10. //監聽視頻播放結束事件
  11. video.addEventListener("ended",function(){
  12. alert("播放結束。");
  13. },true);
  14. //發生錯誤
  15. video.addEventListener("error",function(){
  16. switch(video.error.code){
  17. case MediaError.Media_ERROR_ABORTED:
  18. alert("視頻的下載過程被中止。");
  19. break;
  20. case MediaError.MEDIA_ERR_NETWORK:
  21. alert("網絡發生故障，視頻的下載過程被中止。");
  22. break;
  23. case MediaError.MEDIA_ERR_DECODE:
  24. alert("解碼失敗。");
  25. break;
  26. case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
  27. alert("不支持播放的視頻格式。");
  28. break;
  29. }
  30. },false);
  31. }
  32.  
  33. function play(){
  34. //播放視頻
  35. video.play();
  36. }
  37.  
  38. function pause(){
  39. //暫停視頻
  40. video.pause();
  41. }
  42. </script>
  43. </head>
  44. <body onLoad="init()">
  45. <!--可以添加controls屬性來顯示瀏覽器自帶的播放控制條-->
  46. <video id="video1" src="test.gov"></video>
  47. <br/>
  48. <button onClick="play()">播放</button>
  49. <button onClick="pause()">暫停</button>
  50. </body>
  51. </html>

canPlayType方法

使用canPlayType方法來測試瀏覽器是否支持指定的媒體類型，該方法定義如下所示。

  1. var support = vodeElement.canPlayType(type);

videoElement表示頁面上的video元素或者audio元素，該方法使用一個參數type，該參數的指定方法與soruce元素的type參數相同，都用播放文件的MIME類型來指定，可以在指定的字符串中加上表示媒體編碼格式的codes參數。

該方法返回3個可能值：

  • 空字符串：表示瀏覽器不支持此種媒體類型。
  • maybe：表示瀏覽器可能支持此種媒體類型。
  • probably：表示瀏覽器確定支持此種媒體類型。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 html5中的video標簽和audio標簽 html5 audio/video 的那些坑 html5中的audio和video屬性和事件匯總 HTML5視頻Video 音頻Audio [jPlayer] HTML5 Audio & Video for jQuery HTML5 Video/Audio播放本地文件 html5 音頻和視頻（audio And video） HTML中添加音樂video embed audio HTML5 Audio/Video 標簽,屬性,方法,事件匯總 HTML5 video/audio監聽事件屬性及方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM