當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

073_html5视频

發布時間：2025/4/17 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 073_html5视频小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 許多時髦的網站都提供視頻。html5提供了展示視頻的標準。

2. Web上的視頻

2.1. 直到現在, 仍然不存在一項旨在網頁上顯示視頻的標準。

2.2. 今天, 大多數視頻是通過插件(比如: Flash)來顯示的。然而, 并非所有瀏覽器都擁有同樣的插件。

2.3. html5規定了一種通過video元素來包含視頻的標準方法。

2.4. <video>標簽定義視頻, 比如電影片段或其他視頻流。

3. 視頻格式

3.1. 當前, video元素支持三種視頻格式:

3.2. Ogg: 帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。

3.3. MPEG4: 帶有H.264視頻編碼和AAC音頻編碼的MPEG 4文件。

3.4. WebM: 帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。

4. <video>標簽的屬性

5. <source>標簽

5.1. <source>標簽為媒介元素(比如: <video>和<audio>)定義媒介資源。

5.2. <source>標簽允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

5.3. 可能的屬性

6. 如何工作

6.1. 如需在html5中顯示視頻, 您所有需要的是:

6.2. controls屬性供添加播放、暫停和音量控件。

6.3. 包含寬度和高度屬性也是不錯的主意。

6.4. <video>與</video>之間插入的內容是供不支持video元素的瀏覽器顯示的:

<video src="movie.ogg" width="320px" height="240px" controls="controls"> Your browser does not support the video tag. </video>

6.5. 上面的例子使用一個Ogg文件, 適用于Firefox、Chrome瀏覽器。要確保適用于Safari瀏覽器, 視頻文件必須是MPEG4類型。video元素允許多個source元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式:

<video width="320px" height="240px" controls="controls"><source src="movie.ogg" type="video/ogg" /><source src="movie.mp4" type="video/mp4" /> Your browser does not support the video tag. </video>

7. 例子

7.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>html5視頻</title></head><body><video width="320px" height="240px" controls="controls"><source src="movie.ogg" type="video/ogg" /><source src="movie.mp4" type="video/mp4" />Your browser does not support the video tag.</video></body> </html>

7.2. 效果圖

總結

以上是生活随笔為你收集整理的073_html5视频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

视频