站長(zhǎng)資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        如何在html頁面中插入視頻

        如何在html頁面中插入視頻

        Video標(biāo)簽的使用

        Video標(biāo)簽含有src、poster、preload、autoplay、loop、controls、width、height等幾個(gè)屬性, 以及一個(gè)內(nèi)部使用的標(biāo)簽<source>。Video標(biāo)簽內(nèi)除了可以包含<source>標(biāo)簽外,還可以包含當(dāng)指定的視頻都不能播放時(shí),返回的內(nèi)容。

        (1) src屬性和poster屬性

        你能想象src屬性是用來干啥的。跟<img>標(biāo)簽的一樣,這個(gè)屬性用于指定視頻的地址。而poster屬性用于指定一張圖片,在當(dāng)前視頻數(shù)據(jù)無效時(shí)顯示(預(yù)覽圖)。視頻數(shù)據(jù)無效可能是視頻正在加載,可能是視頻地址錯(cuò)誤等等。

        <video width="658"  height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>

        (2) preload屬性

        這個(gè)屬性也能通過名字了解用處,此屬性用于定義視頻是否預(yù)加載。屬性有三個(gè)可選擇的值:none、metadata、auto。如果不使用此屬性,默認(rèn)為auto。

        <video width="658"  height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

        None:不進(jìn)行預(yù)加載。使用此屬性值,可能是頁面制作者認(rèn)為用戶不期望此視頻,或者減少HTTP請(qǐng)求。

        Metadata:部分預(yù)加載。使用此屬性值,代表頁面制作者認(rèn)為用戶不期望此視頻,但為用戶提供一些元數(shù)據(jù)(包括尺寸,第一幀,曲目列表,持續(xù)時(shí)間等等)。

        Auto:全部預(yù)加載。

        (推薦教程:html入門教程)

        (3) autoplay屬性

        又是一個(gè)看名字知道用處的屬性。Autoplay屬性用于設(shè)置視頻是否自動(dòng)播放,是一個(gè)布爾屬性。當(dāng)出現(xiàn)時(shí),表示自動(dòng)播放,去掉是表示不自動(dòng)播放。

        <video width="658"  height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

        注意,HTML中布爾屬性的值不是true和false。正確的用法是,在標(biāo)簽中使用此屬性表示true,此時(shí)屬性要么沒有值,要么其值恒等于他的名字 (此處,自動(dòng)播放為<video autoplay />或者<video autoplay=”autoplay” />);而在標(biāo)簽中不使用此屬性表示false(此處不進(jìn)行自動(dòng)播放為<video />)。

        (4) loop屬性

        <video width="658"  height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>

        一目了然,loop屬性用于指定視頻是否循環(huán)播放,同樣是一個(gè)布爾屬性。

        (5) controls屬性

        <video width="658"  height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>

        Controls屬性用于向?yàn)g覽器指明頁面制作者沒有使用腳本生成播放控制器,需要瀏覽器啟用本身的播放控制欄。

        控制欄須包括播放暫停控制,播放進(jìn)度控制,音量控制等等。

        每個(gè)瀏覽器默認(rèn)的播放控制欄在界面上不一樣。由于我瀏覽器的詭異問題,F(xiàn)irefox和Safari的Video標(biāo)簽不正常,所以這兩個(gè)只能在網(wǎng)上找截圖了。

        (6) width屬性和height屬性

        屬于標(biāo)簽的通用屬性了,這個(gè)不用多說。

        (7) source標(biāo)簽

        <video width="658"  height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"  /><source src="http://www.youname.com/images/first.ogg"  /></video>

        Source標(biāo)簽用于給媒體(因?yàn)閍udio標(biāo)簽同樣可以包含此標(biāo)簽,所以這兒用媒體,而不是視頻)指定多個(gè)可選擇的(瀏覽器最終只能選一個(gè))文件地址,且只能在媒體標(biāo)簽沒有使用src屬性時(shí)使用。

        瀏覽器按source標(biāo)簽的順序檢測(cè)標(biāo)簽指定的視頻是否能夠播放(可能是視頻格式不支持,視頻不存在等等),如果不能播放,換下一個(gè)。此方法多用于兼容不同的瀏覽器。Source標(biāo)簽本身不代表任何含義,不能單獨(dú)出現(xiàn)。

        此標(biāo)簽包含src、type、media三個(gè)屬性。

        src屬性:用于指定媒體的地址,和video標(biāo)簽的一樣。

        Type屬性:用于說明src屬性指定媒體的類型,幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。

        Media屬性:用于說明媒體在何種媒介中使用,不設(shè)置時(shí)默認(rèn)值為all,表示支持所有媒介。你想到<style>標(biāo)簽的media屬性了么?一樣一樣一樣的。

        (8) 一個(gè)完整的例子

        <video width="658"  height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"  /><source src="http://www.youname.com/images/first.ogg"  /></video>

        這段代碼在頁面中定義了一個(gè)視頻,此視頻的預(yù)覽圖為poster的屬性值,顯示瀏覽器的默認(rèn)媒體控制欄,預(yù)加載視頻的元數(shù)據(jù),循環(huán)播放,寬度為900像素,高度為240像素。

        第一選擇視頻地址為第一個(gè)source標(biāo)簽的src屬性值,視頻類別為Ogg視頻,視頻編碼譯碼器為Theora,音頻編碼譯碼器為Vorbis,播放媒 介為顯示器;第二選擇視頻地址不再累述。如果你還要兼容IE的話,可以在最后一個(gè)source標(biāo)簽后再加上Flash播放器的標(biāo)簽集,或者使用一點(diǎn) JavaScript代碼。

        相關(guān)視頻教程推薦:html視頻教程

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)
        主站蜘蛛池模板: 国产精品白丝AV网站| 四虎国产精品免费观看| 国产人成精品午夜在线观看| 日韩精品一区二区三区中文字幕 | 国产精品成人一区二区| 三上悠亚久久精品| 亚洲精品欧美精品日韩精品| 国产精品自在线拍国产手机版| 国产高清国产精品国产专区| 乱码精品一区二区三区| 亚洲综合精品网站| 亚洲AV成人精品日韩一区18p| 精品99久久aaa一级毛片| 亚洲天堂久久精品| 国产精品天天影视久久综合网| 日产精品一线二线三线芒果| 无码AV动漫精品一区二区免费 | 国产精品亚洲视频| 免费91麻豆精品国产自产在线观看| 国产午夜精品一区二区三区漫画 | 中文字幕av日韩精品一区二区| 精品久久久久久无码中文野结衣| 丁香色婷婷国产精品视频| 91久久精品电影| 国产A∨国片精品一区二区| 91无码人妻精品一区二区三区L| 欧美777精品久久久久网| 久久精品嫩草影院| 91麻豆精品一二三区在线| 国产成人精品免高潮在线观看| 51精品资源视频在线播放| 99re66在线观看精品免费| 国产高清国内精品福利99久久| 91精品视频观看| 国产区精品高清在线观看| 精品露脸国产偷人在视频| 久久精品二区| 亚洲精品tv久久久久久久久久| 亚洲综合精品香蕉久久网| 亚洲AV午夜福利精品一区二区| 人妻少妇乱子伦精品|