首頁  >  文章  >  web前端  >  html5中video標籤的詳細介紹

html5中video標籤的詳細介紹

不言
不言轉載
2018-10-26 14:50:084694瀏覽

這篇文章帶給大家的內容是關於html5中video標籤的詳細介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

<video src="http://www.lorem.com/video/lorem.mp4" controls="controls" width="500" height="300"></video>

39000f942b2545a5315c57fa3276f220標籤所支援的視訊格式和編碼:

MP4 = MPEG 4檔案使用H264 視訊編解碼器和AAC音訊編解碼器

WebM = WebM 檔案使用VP8 視訊編解碼器和Vorbis 音訊編解碼器

Ogg = Ogg 檔案使用Theora 視訊編解碼器和Vorbis音訊編解碼器

#透過上面的資訊我們會發現只有h264編碼的MP4影片(MPEG-LA公司)、VP8編碼的webm格式的影片(Google公司)和Theora編碼的ogg格式的影片(iTouch開發)可以支援html5的39000f942b2545a5315c57fa3276f220標籤。

如果瀏覽器不支援video標籤怎麼辦?

例如IE瀏覽器還有舊版的瀏覽器對html5的支援不太好,當使用者用這些瀏覽器開啟我們有影片的網頁怎麼辦呢?

我們可以把程式碼這樣寫:

<video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300">您的浏览器不支持播放该视频!</video>

這樣在不支援html5的瀏覽器中就會提示「您的瀏覽器不支援播放該影片!」啦!

關於video標籤的擴充參數說明:

video 元素允許多個 source 元素。 source 元素可以連結不同的影片檔案。瀏覽器將使用第一個可識別的格式,這樣我們只要多準備幾個不同格式的影片就可以了。

用法:

<video width="500" height="250" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持此种视频格式。
</video>

autoplay :出現該屬性表示影片在就緒後將自動播放,用法:autoplay="autoplay"

controls :出現該屬性意味著向使用者顯示控件,如播放按鈕等,用法:controls="controls"

height:設定高度    

width:設定寬度

#loop:自動重播,用法:loop="loop"

preload:影片在頁面載入時進行載入並預備播放,用法:preload="auto" - 當頁面載入後載入整個影片;preload="meta" -當頁面載入後只載入元資料;preload="none" - 當頁面載入後不載入影片。注意:若使用了autoplay,則忽略preload

src:要播放影片的url

關於39000f942b2545a5315c57fa3276f220標籤我就介紹到這裡,相信大家都對這個標籤有了深刻的了解!

以上是html5中video標籤的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除