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

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

May 16, 2016 pm 03:45 PM
audio html5 video 影片 音訊

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

Klipsch 推出 Flexus Core 300 旗艦條形音箱,支援 8K、12 個揚聲器和房間校正 Klipsch 推出 Flexus Core 300 旗艦條形音箱,支援 8K、12 個揚聲器和房間校正 Sep 05, 2024 am 10:16 AM

Klipsch Flexus Core 300 是該系列中的頂級型號,位於該公司條形音箱系列中現有的 Flexus Core 200 之上。根據 Klipsch 的說法,這是世界上第一個聲音可以適應現實的條形音箱。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

See all articles