主頁 > 知識庫 > 使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法

使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法

熱門標簽:pageadm實現(xiàn)地圖標注 阜陽企業(yè)外呼系統(tǒng) 申請400電話流程簡介 外呼線穩(wěn)定線路 呼和浩特外呼電銷系統(tǒng)排名 邢臺縣地圖標注app 地圖標注位置能賺錢嗎 外呼系統(tǒng)電話怎么投訴 南通數(shù)據(jù)外呼系統(tǒng)推廣

HTML5 特性,包括原生音頻和視頻支持而無需 Flash。

HTML5 <audio> 和 <video> 標簽讓我們給站點添加媒體變得簡單。我們只需要設(shè)置 src 屬性來識別媒體資源,包含 controls 屬性讓用戶可以播放和暫停媒體。

嵌入視頻
下面是在 Web 頁面中嵌入視頻文件最簡單的形式:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <video src="foo.mp4"  width="300" height="200" controls>  
  2.     Your browser does not support the <video> element.      
  3. </video>  

目前的 HTML5 規(guī)范草案還沒有指定瀏覽器應(yīng)該在 video 標簽中支持哪種視頻格式。但是最常用的視頻格式是:

Ogg:帶有 Thedora 視頻編碼器和 Vorbis 音頻編碼器的 Ogg 文件。
mpeg4:帶有 H.264 視頻編碼器和 AAC 音頻編碼器的 MPEG4 文件。
我們可以使用帶有媒體類型和其他屬性的 <source> 標簽指定媒體文件。video 元素允許使用多個 source 元素,瀏覽器會使用第一個認可的格式:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.    <video  width="300" height="200" controls autoplay>  
  5.        <source src="/html5/foo.ogg" type="video/ogg" />  
  6.        <source src="/html5/foo.mp4" type="video/mp4" />  
  7.        Your browser does not support the <video> element.   
  8.    </video>  
  9. </body>  
  10. </html>  

Video 屬性規(guī)范
HTML5 video 標簽可以使用多個屬性控制外觀和感覺以及各種控制功能:

屬性 描述
autoplay 如果指定這個布爾值屬性,只要沒有停止加載數(shù)據(jù),視頻就會立刻開始自動播放。
autobuffer 如果指定這個布爾值屬性,即使沒有設(shè)置自動播放,視頻也會自動開始緩沖。
controls 如果指定這個屬性,就允許用戶控制視頻播放,包括音量控制,快進,暫停或者恢復(fù)播放。
height 這個屬性以 CSS 像素的形式指定視頻顯示區(qū)域的高度。
loop 如果指定這個布爾值屬性,表示允許播放結(jié)束后自動回放。
preload 指定這個屬性,視頻會在載入頁面時加載并準備就緒。如果指定自動播放則忽略。
poster 這是一個圖像 URL,顯示到用戶播放或快進。
src 要嵌入的視頻 URL。可選,可以在 video 塊中使用 <source> 元素替代來指定要嵌入的視頻。
width 這個屬性以 CSS 像素的形式指定視頻顯示區(qū)域的寬度。

嵌入音頻
HTML5 支持的 <audio> 標簽用于在如下所示的 HTML 或 XHTML 文檔中嵌入語音內(nèi)容。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <audio src="foo.wav" controls autoplay>  
  2.     Your browser does not support the <audio> element.      
  3. </audio>  

當前的 HTML 草案規(guī)范還沒有指定瀏覽器應(yīng)該在 audio 標簽中支持哪種音頻格式。但是最常用的音頻格式是 ogg,mp3 和 wav。

我們可以使用帶媒體類型以及其他屬性的的 <source> 標簽指定媒體。Audio 元素允許使用多個 source 元素,并且瀏覽器會使用第一個認可的格式:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.    <audio controls autoplay>  
  5.        <source src="/html5/audio.ogg" type="audio/ogg" />  
  6.        <source src="/html5/audio.wav" type="audio/wav" />  
  7.        Your browser does not support the <audio> element.   
  8.    </audio>  
  9. </body>  
  10. </html>  

Audio 屬性規(guī)范

HTML5 audio 標簽可以使用多個屬性來控制外觀,感受以及各種控制功能:

屬性 描述
autoplay 如果指定這個布爾值屬性,只要沒停止加載數(shù)據(jù),音頻就會立刻自動開始播放。
autobuffer 如果指定這個布爾值屬性,即使沒有設(shè)置自動播放,音頻也會自動開始緩沖。
controls 如果指定這個屬性,表示允許用戶控制音頻播放,包括音量控制,快進以及暫停/恢復(fù)播放。
loop 如果指定這個布爾值屬性,表示允許音頻播放結(jié)束后自動回放。
preload 這個屬性指定加載頁面時加載音頻并準備就緒。如果指定自動播放則忽略。
src 要嵌入的音頻 URL??蛇x,可以在音頻塊里面使用 <source> 元素指定要嵌入的音頻來替代。

處理媒體事件
HTML5 audio 和 video 標簽可以用多個屬性利用 JavaScript 控制各種控制功能:
事件 描述
abort 播放中止時生成這個事件。
canplay 足夠的數(shù)據(jù)可用并且媒體可以播放時生成這個事件。
ended 播放完成時生成這個事件。
error 發(fā)生錯誤時生成這個事件。
loadeddata 媒體第一幀載入完成時生成這個事件。
loadstart 開始加載媒體時生成這個事件。
pause 播放暫停時生成這個事件。
play 播放開始或者恢復(fù)時生成這個事件。
progress 定期通知媒體下載進度時生成這個事件。
ratechange 播放速度改變時生成這個事件。
seeked 快進操作完成時生成這個事件。
seeking 快進操作開始時生成這個事件。
suspend 媒體加載被暫停時生成這個事件。
volumechange 音頻音量變化時生成這個事件。
waiting 請求操作(比如播放)被延遲,等待另一個操作完成(比如快進)時生成這個事件。

下面是一個允許播放給定視頻的示例:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE HTML>  
  2. <head>  
  3. <script type="text/javascript">  
  4. function PlayVideo(){   
  5.    var v = document.getElementsByTagName("video")[0];     
  6.    v.play();    
  7. }   
  8. </script>  
  9. </head>  
  10. <html>  
  11. <body>  
  12.    <form>  
  13.    <video  width="300" height="200" src="/html5/foo.mp4">  
  14.        Your browser does not support the <video> element.   
  15.    </video>  
  16.    <input type="button" onclick="PlayVideo();"  value="Play"/>  
  17.    </form>  
  18. </body>  
  19. </html>  

配置服務(wù)器媒體類型
大多數(shù)服務(wù)器默認都沒使用正確的 MIME 類型提供 Ogg 或 mp4 媒體,因此我們可能需要添加適當?shù)呐渲谩?/p>


復(fù)制代碼
代碼如下:
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

標簽:黃山 撫順 辛集 德州 蚌埠 鶴崗 內(nèi)蒙古 楊凌

巨人網(wǎng)絡(luò)通訊聲明:本文標題《使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法》,本文關(guān)鍵詞  使用,HTML5,在,網(wǎng)頁,中,嵌入,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法》相關(guān)的同類信息!
  • 本頁收集關(guān)于使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章