html5怎么在web頁(yè)面播放視頻呢

小編給大家分享一下html5怎么在web頁(yè)面播放視頻呢，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

首先我們介紹下播放視頻的標(biāo)簽：

html5<video>標(biāo)簽：<video>標(biāo)簽定義視頻，比如電影片段或其他視頻流。

web上的視頻直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁(yè)上顯示視頻的標(biāo)準(zhǔn)。

今天，大多數(shù)視頻是通過(guò)插件（比如 Flash）來(lái)顯示的。然而，并非所有瀏覽器都擁有同樣的插件。

HTML5 規(guī)定了一種通過(guò) video 元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。

一段簡(jiǎn)單的HTML5視頻實(shí)例：

<video src="movie.ogg" controls="controls">
您的瀏覽器不支持 video 標(biāo)簽。
</video>

找不到視頻的時(shí)候網(wǎng)頁(yè)上就會(huì)顯示這段文字，

HTML5 video標(biāo)簽的視頻格式：

當(dāng)前，video 元素支持三種視頻格式：

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

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

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

現(xiàn)在說(shuō)說(shuō)HTML5 video標(biāo)簽如何在web網(wǎng)頁(yè)上播放視頻的呢：

1.基礎(chǔ)用法：

<video src="hangge.mp4" controls></video>

2.通過(guò)width和height設(shè)置視頻窗口大小：

<video src="hangge.mp4" controls width="400" height="300"></video>

3.預(yù)加載媒體文件：

設(shè)置preload不同的屬性值，可以告訴瀏覽器應(yīng)該怎樣加載一個(gè)媒體文件：

• 值為auto：讓瀏覽器自動(dòng)下載整個(gè)文件

• 值為none：讓瀏覽器不必預(yù)先下載文件

• 值為metadata：讓瀏覽器先獲取視頻文件開(kāi)頭的數(shù)據(jù)塊，從而足以確定一些基本信息（比如視頻的總時(shí)長(zhǎng)，第一幀圖像等）

<!-- 用戶點(diǎn)擊播放才開(kāi)始下載 --><video src="hangge.mp4" controls preload="none"></video>

4.自動(dòng)播放：

（1）使用autoplay屬性可以讓瀏覽器加載完視頻文件后立即播放。

<video src="hangge.mp4" controls autoplay></video>

（2）如果啟用自動(dòng)播放，可以將播放器設(shè)置為muted狀態(tài)。這樣自動(dòng)播放時(shí)會(huì)靜音，防止用戶厭煩。用戶需要的話可以點(diǎn)擊播放器揚(yáng)聲器圖標(biāo)重新打開(kāi)聲音。

<video src="hangge.mp4" controls autoplay muted></video>

5.循環(huán)播放：

使用loop屬性讓視頻播放結(jié)束時(shí)，再?gòu)念^開(kāi)始播放。

<video src="hangge.mp4" controls loop></video>

看完了這篇文章，相信你對(duì)html5怎么在web頁(yè)面播放視頻呢有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！