站長資訊網
最全最豐富的資訊網站

html5怎么嵌入視頻

html5怎么嵌入視頻

首先我們要知道HTML5是支持直接在瀏覽器中播放音頻和視頻文件的,不需要使用 adobe flash 插件。

插件缺點:插件是令瀏覽器崩潰的主要原因之一,特別是 flash,存在著很多問題。

(視頻學習推薦:html5視頻教程)

在網頁中嵌入視頻要使用 video 元素。

一、<video> 標簽

定義和用法

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

提示

可以在開始標簽和結束標簽之間放置文本內容,這樣老的瀏覽器就可以顯示出不支持該標簽的信息

屬性:

html5怎么嵌入視頻

舉例:

<!DOCTYPE HTML> <html> <body>   <video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls"> 您的瀏覽器不支持 video 標簽。 </video>   </body> </html>
登錄后復制

html5怎么嵌入視頻

瀏覽器支持的視頻格式

html5怎么嵌入視頻

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

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

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

總結:沒有任何一個格式可以支持所有的瀏覽器

最簡單的方法,同時使用 Mp4 和 Ogv 兩種影音格式

二、<source> 標簽

在 <video></video> 中間插入元素 source

source 元素用來設置視頻格式,包含屬性 src 和 type

舉例:

<video src='視頻1.mp4' heigth='500px' controls>   <source src='視頻2.mp4' type='video/mp4'>   <!-- 當‘視頻1.mp4’無法播放時,會跳轉到src='視頻2.mp4' -->   <source src='視頻2.ogv' type='video/ogg'>   <!-- 當瀏覽器不支持MP4格式的視頻時,會自動找此處ogv格式的視頻 -->   <source src='視頻2.webm' type='video/webm'> </video>
登錄后復制

這里提供了兩種可選的視頻格式 Mp4 和 Ogv。視頻鏈接現在不再是通過 video 元素的 src 屬性來給出,而是通過 source 元素單獨指出。source 元素允許我們指定多種可選格式的視頻文件,這樣當瀏覽器不支持寫在前面的格式時可以選擇后面格式的視頻文件。

相關推薦:h5

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
国产精品videossexohd| 99热这里有免费国产精品| 日韩一区二区电影| 成人精品一区二区激情| 国产精品视频网站你懂得| 99精品中文字幕| 国产精品涩涩涩视频网站| 国产在线精品一区二区夜色| 亚洲国产精品无码久久久蜜芽| 国产成人精品久久亚洲高清不卡 | 亚洲日韩国产精品乱-久| 国产精品成人99一区无码| 欧美日韩精品一区二区在线观看| 精品麻豆丝袜高跟鞋AV| 精品人妻少妇嫩草AV无码专区| 亚洲日韩精品无码AV海量| 日韩精品在线观看| 国产福利精品视频| 成人精品一区久久久久| 国产精品无码一区二区在线| 国产精品美女在线观看| 精品久久久久久蜜臂a∨| 91精品国产自产在线观看| 黑人无码精品又粗又大又长| 精品一区二区三区影院在线午夜| 2020精品自拍视频曝光| 在线人成精品免费视频| 97精品伊人久久久大香线焦| 久久精品a亚洲国产v高清不卡| 日韩精品少妇无码受不了| 日韩精品区一区二区三VR| 久热这里只有精品12| 老司机午夜精品视频资源| 精品人人妻人人澡人人爽人人| 2021国内精品久久久久精免费 | 亚洲欧美日韩一区二区三区| 国产精品日韩深夜福利久久| 亚洲电影日韩精品| 日韩毛片免费无码无毒视频观看| 美女免费精品高清毛片在线视| 2022免费国产精品福利在线|