HTNL5--<video>/<audio>標簽隨筆

来源:http://www.cnblogs.com/Alice-zy2/archive/2017/11/07/7801503.html
-Advertisement-
Play Games

WHATWG 致力於 web 表單和應用程式，而 W3C 專註於 XHTML 2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML——HTML5 。 為 HTML5 建立的一些規則： 新特性應該基於 HTML、CSS、DOM 以及 JavaScript。 減少對外部插件的需求（比 ...


WHATWG 致力於 web 表單和應用程式，而 W3C 專註於 XHTML 2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML——HTML5 。

為 HTML5 建立的一些規則：

  • 新特性應該基於 HTML、CSS、DOM 以及 JavaScript。
  • 減少對外部插件的需求（比如 Flash）
  • 更優秀的錯誤處理
  • 更多取代腳本的標記
  • HTML5 應該獨立於設備
  • 開發進程應對公眾透明

新特性

  • 用於繪畫的 canvas 元素
  • 用於媒介回放的 video 和 audio 元素
  • 對本地離線存儲的更好的支持
  • 新的特殊內容元素，比如 article、footer、header、nav、section
  • 新的表單控制項，比如 calendar、date、time、email、url、search

1<video></video>——視頻

 

視頻格式

當前，video 元素支持三種視頻格式：

格式IEFirefoxOperaChromeSafari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

    *Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

   *MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

   *WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

 一般用法：

<video src='...' controls>
Your browser does not support the video tag.
</video>

*control屬性提供播放、暫停和音量控制項。標簽里內容是在不支持video元素的瀏覽器中顯示。

 針對瀏覽器

Internet Explorer 8 不支持 video 元素。在 IE 9 中，將提供對使用 MPEG4 的 video 元素的支持。

 為了要確保適用於 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。

瀏覽器將使用第一個可識別的視頻格式：

1 <video width="xxx" height="xxx" controls="controls">
2     <source src="xxx.ogg" type="video/ogg">
3     <source src="xxx.mp4" type="video/mp4">
4     Your browser does not support the video tag.
5 </video>

video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。

<video> 標簽的屬性

屬性值描述
autoplay autoplay 自動播放
controls controls 瀏覽器自帶的控制條
height pixels 設置視頻播放器的高度。
loop loop 迴圈播放
preload preload (預載入) 如果使用 "autoplay"，則會忽略該屬性。
poster   視頻封面，沒有播放時顯示的圖片
src url 要播放的視頻的 URL。
width pixels 設置視頻播放器的寬度。

<video>-使用DOM進行控制

下麵列出了大多數瀏覽器支持的視頻方法、屬性和事件：

方法屬性事件
play()  [開始播放音頻/視頻] currentSrc play
pause()  [暫停當前播放的音頻/視頻] currentTime pause
load()  [重新載入音頻/視頻元素] videoWidth progress
canPlayType() [檢測瀏覽器是否能播放指定的音頻/視頻類型] videoHeight error
addTextTrack()  [向音頻/視頻添加新的文本軌道] duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  

註釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數據已載入後，其他屬性才可用。詳情

簡單示例：

html:

<div style="text-align:center;">
  <button onclick="playPause()">播放/暫停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br /> 
  <video id="media" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div>

js:

var myVideo=document.getElementById("media");

function playPause(){ 
  if (myVideo.paused) 
     myVideo.play(); 
  else 
     myVideo.pause(); 
} 

function makeBig(){ 
   myVideo.width=560; 
} 

function makeSmall(){ 
   myVideo.width=320; 
} 

function makeNormal(){ 
   myVideo.width=420; 
}

來自w3school.com.cn

 

2<audio></audio>——音頻

音頻格式

當前，audio 元素支持三種音頻格式：

 IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg Vorbis   √ √ √  
MP3 √     √ √
Wav   √ √   √

一般用法

1 <audio src="song.ogg" controls="controls">
2     Your browser does not support the audio tag.
3 </audio>

 針對瀏覽器：

一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器。

為了要確保適用於 Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型。

Internet Explorer 8 不支持 audio 元素。在 IE 9 中，將提供對 audio 元素的支持。

audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式：

1 <audio controls="controls">
2   　　<source src="song.ogg" type="audio/ogg">
3  　　 <source src="song.mp3" type="audio/mpeg">
4     Your browser does not support the audio tag.
5 </audio>

<audio> 標簽的屬性

屬性值描述
autoplay autoplay 如果出現該屬性，則音頻在就緒後馬上播放。
controls controls 如果出現該屬性，則向用戶顯示控制項，比如播放按鈕。
loop loop 如果出現該屬性，則每當音頻結束時重新開始播放。
preload preload

如果出現該屬性，則音頻在頁面載入時進行載入，並預備播放。

如果使用 "autoplay"，則忽略該屬性。
src url 要播放的音頻的 URL。

 

 

獲取HTMLVideoElement和HTMLAudioElement對象

js代碼：

1 //audio可以直接通過new創建對象  
2 Media = new Audio("http://www.abc.com/test.mp3");  
3 //audio和video都可以通過標簽獲取對象  
4 Media = document.getElementById("media");

Media方法和屬性：

HTMLVideoElement 和 HTMLAudioElement 均繼承自 HTMLMediaElement

 1 //錯誤狀態  
 2    Media.error; //null:正常  
 3    Media.error.code; //1.用戶終止 2.網路錯誤 3.解碼錯誤 4.URL無效  
 4   
 5 //網路狀態  
 6    Media.currentSrc; //返回當前資源的URL  
 7    Media.src = value; //返回或設置當前資源的URL  
 8    Media.canPlayType(type); //是否能播放某種格式的資源  
 9    Media.networkState; //0.此元素未初始化  1.正常但沒有使用網路  2.正在下載數據  3.沒有找到資源  
10    Media.load(); //重新載入src指定的資源  
11    Media.buffered; //返回已緩衝區域，TimeRanges  
12    Media.preload; //none:不預載 metadata:預載資源信息 auto:  
13   
14 //準備狀態  
15    Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  
16    Media.seeking; //是否正在seeking  
17   
18 //回放狀態  
19    Media.currentTime = value; //當前播放的位置，賦值可改變位置  
20    Media.startTime; //一般為0，如果為流媒體或者不從0開始的資源，則不為0  
21    Media.duration; //當前資源長度 流返回無限  
22    Media.paused; //是否暫停  
23    Media.defaultPlaybackRate = value;//預設的回放速度，可以設置  
24    Media.playbackRate = value;//當前播放速度，設置後馬上改變  
25    Media.played; //返回已經播放的區域，TimeRanges，關於此對象見下文  
26    Media.seekable; //返回可以seek的區域 TimeRanges  
27    Media.ended; //是否結束  
28    Media.autoPlay;  //是否自動播放  
29    Media.loop;  //是否迴圈播放  
30    Media.play();    //播放  
31    Media.pause();   //暫停  
32   
33 //控制  
34    Media.controls;//是否有預設控制條  
35    Media.volume = value; //音量  
36    Media.muted = value; //靜音  
37   
38    //TimeRanges(區域)對象  
39    TimeRanges.length; //區域段數  
40    TimeRanges.start(index) //第index段區域的開始位置  
41    TimeRanges.end(index) //第index段區域的結束位置
View Code

事件：

 1    eventTester = function(e){  
 2     Media.addEventListener(e,function(){  
 3         console.log((new Date()).getTime(),e);  
 4     });  
 5 }  
 6   
 7 eventTester("loadstart");   //客戶端開始請求數據  
 8 eventTester("progress");    //客戶端正在請求數據  
 9 eventTester("suspend");     //延遲下載  
10 eventTester("abort");       //客戶端主動終止下載（不是因為錯誤引起），  
11 eventTester("error");       //請求數據時遇到錯誤  
12 eventTester("stalled");     //網速失速  
13 eventTester("play");        //play()和autoplay開始播放時觸發  
14 eventTester("pause");       //pause()觸發  
15 eventTester("loadedmetadata");  //成功獲取資源長度  
16 eventTester("loadeddata");  //  
17 eventTester("waiting");     //等待數據，並非錯誤  
18 eventTester("playing");     //開始回放  
19 eventTester("canplay");     //可以播放，但中途可能因為載入而暫停  
20 eventTester("canplaythrough"); //可以播放，歌曲全部載入完畢  
21 eventTester("seeking");     //尋找中  
22 eventTester("seeked");      //尋找完畢  
23 eventTester("timeupdate");  //播放時間改變  
24 eventTester("ended");       //播放結束  
25 eventTester("ratechange");  //播放速率改變  
26 eventTester("durationchange");  //資源長度改變  
27 eventTester("volumechange");    //音量改變
View Code

[轉：http://sailinglee.iteye.com/blog/1331204]


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [原創]商城系統下單庫存管控系列雜記（一）（併發安全和性能基礎認識）
    前言 參與過幾個中小型商城系統的開發，隨著時間的增長，以及對系統的深入研究和測試，發現確實有很多值得推敲和商榷的地方（總有很多重要細節存在缺陷）。基於商城系統，無論規模大小，或者本身是否分佈架構，個人覺得最核心的一環就是下單模塊，而這裡面更相關和棘手的一些設計和問題，大多時候都涉及庫存系統。想想之... ...
  • C#委托事件隨筆
    //用戶去銀行取錢（發佈方），用戶收到簡訊提醒，（接收方） class Program { static void Main(string[] args) { Bank b = new Bank(); //實例化銀行 User xm = new User("... ...
  • SSM框架的搭建
    第一階段： 1、用PowerDesign建數據模型，並導出SQL文件； 2、將SQL文件導入到MySQL客戶端，建立表格； MySQL數據遠程訪問：GRANT ALL PRIVILEGES ON *.* TO 'root'@'%'IDENTIFIED BY 'mypassword' WITH GRA ...
  • docker~環境變數到底怎麼用
    docker已經用了兩年多了，從開始的簡單應用到現在的自動化部署，已經越來越感覺到它的威力，今天把Hitchhiker部署完成後，看到了它與.net core項目有個類似的地方，就是對於多環境部署的時候都用到了環境變數，Hitchhiker的docker-compose.yml里有對環境地址的設置（ ...
  • Javascript 的定時器 setInterval,setTimeout,clearInterval
    今天開通博客、來1個、哇哈哈哈~~ 今天本來想複習BOM的看到定時器也算DOM一種 ?(是這樣嗎)、分享一下 參考源於：八神吻你 http://www.cnblogs.com/lmfeng/archive/2011/06/24/2089237.html 單次定時器即執行 單次延遲定時器 多次執行定時 ...
  • Webpack打包構建太慢了？試試幾個方法
    Webpack是個很流行的打包工具，但其打包速度卻一直被吐槽著 如果不用上一些打包的優化建議，單單打包兩三個文件就能花上好幾秒，放上幾十個入口文件依賴幾百上千個包的話，幾分鐘十幾分鐘妥妥的 本文整理了常見的一些方法，部分使用之後就看到了很大改善，部分沒什麼明顯的變化，也可能是項目規模還不夠大，先記錄 ...
  • JavaScript對象類型之創建對象
    引言 JavaScript中，可以通過對象直接量，關鍵字new(ECMAScript 5中的)Object.create()，函數來創建對象。 對象直接量 JavaScript中使用對象直接量來創建對象是最簡單的方式。對象直接量是由若幹名/值對組成的映射表，名/值對中間用冒號分隔，名/值對之間用逗號 ...
  • jquery判斷checkbox是否被選中
    jquery判斷checkbox是否被選中 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類