首頁  >  文章  >  web前端  >  使用HTML5在網頁中嵌入音訊和視訊播放的基本方法_html5教學技巧

使用HTML5在網頁中嵌入音訊和視訊播放的基本方法_html5教學技巧

WBOY
WBOY原創
2016-05-16 15:45:522966瀏覽

HTML5 特性,包含原生音訊和視訊支援而無需 Flash。

HTML5

嵌入影片
以下是在 Web 頁面中嵌入影片檔案最簡單的形式:

XML/HTML Code複製內容到剪貼簿
  1. video src  width="300"  "200" controls>       Your browser does not support the video
  2. > element.       video
  3. >   目前的 HTML5 規範草稿還沒有指定瀏覽器應該在 video 標籤中支援哪種影片格式。但是最常用的影片格式是: Ogg:帶有 Thedora 視訊編碼器和 Vorbis 音訊編碼器的 Ogg 檔案。
  4. mpeg4:帶有 H.264 視訊編碼器和 AAC 音訊編碼器的 MPEG4 檔案。
我們可以使用帶有媒體類型和其他屬性的 標籤來指定媒體檔案。 video 元素允許使用多個 source 元素,瀏覽器會使用第一個認可的格式:

XML/HTML Code


複製內容到剪貼簿

  1. HTML>  
  2. html>  
  3. 身體>  
  4.    影片  寬度  寬度 🎜> 高度="200" 控制自動播放
  5.        來源 src="/html5 / foo.ogg" 類型="影片/ogg"  
  6.           來源 src="/html5 / foo.mp4" 類型="video/mp4" 
  7. "video/mp4"
  8.             您的瀏覽器不支援
  9. 影片>影片>。   
  10.    
  11. 影片>  
  12. 身體>  

html
>

  

属性 描述
autoplay 如果指定这个布尔值属性,只要没有停止加载数据,视频就会立刻开始自动播放。
autobuffer 如果指定这个布尔值属性,即使没有设置自动播放,视频也会自动开始缓冲。
controls 如果指定这个属性,就允许用户控制视频播放,包括音量控制,快进,暂停或者恢复播放。
height 这个属性以 CSS 像素的形式指定视频显示区域的高度。
loop 如果指定这个布尔值属性,表示允许播放结束后自动回放。
preload 指定这个属性,视频会在载入页面时加载并准备就绪。如果指定自动播放则忽略。
poster 这是一个图像 URL,显示到用户播放或快进。
src 要嵌入的视频 URL。可选,可以在 video 块中使用 元素替代来指定要嵌入的视频。
width 这个属性以 CSS 像素的形式指定视频显示区域的宽度。
視訊屬性規格HTML5視訊標籤可以使用多個屬性控制外觀和感覺以及各種控制功能:
嵌入音訊
HTML5 支援的
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn