<p id="rrtt5"></p><ruby id="rrtt5"></ruby>

      系統城裝機大師 - 唯一官網:www.1999hs.com!

      當前位置:首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

      HTML網頁中插入視頻的方法小結

      時間:2019-12-05來源:系統城作者:電腦系統城

      現在如果要在頁面中使用video標簽,需要考慮三種情況,支持Ogg Theora或者VP8(如果這玩意兒沒出事的話)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,現在讓我們從技術層面來認識HTML 5的視頻,包括video標簽的使用,視頻對象可以用到的媒介屬性和方法,以及媒介事件。

      Video標簽的使用

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

      (1) src屬性和poster屬性

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

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

      (2) preload屬性

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

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

      None:不進行預加載。使用此屬性值,可能是頁面制作者認為用戶不期望此視頻,或者減少HTTP請求。

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

      Auto:全部預加載。

      (3) autoplay屬性

      又是一個看名字知道用處的屬性。Autoplay屬性用于設置視頻是否自動播放,是一個布爾屬性。當出現時,表示自動播放,去掉是表示不自動播放。

      
       
      1. <video width="658"
      2. 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。正確的用法是,在標簽中使用此屬性表示true,此時屬性要么沒有值,要么其值恒等于他的名字 (此處,自動播放為<video autoplay />或者<video autoplay=”autoplay” />);而在標簽中不使用此屬性表示false(此處不進行自動播放為<video />)。

       (4) loop屬性
       

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

      一目了然,loop屬性用于指定視頻是否循環播放,同樣是一個布爾屬性。

      (5) controls屬性
       

      
       
      1. <video width="658"
      2. 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屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器,需要瀏覽器啟用本身的播放控制欄。

      控制欄須包括播放暫??刂?,播放進度控制,音量控制等等。

      每個瀏覽器默認的播放控制欄在界面上不一樣。由于我瀏覽器的詭異問題,Firefox和Safari的Video標簽不正常,所以這兩個只能在網上找截圖了。

      (6) width屬性和height屬性

      屬于標簽的通用屬性了,這個不用多說。

      (7) source標簽
       

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

      Source標簽用于給媒體(因為audio標簽同樣可以包含此標簽,所以這兒用媒體,而不是視頻)指定多個可選擇的(瀏覽器最終只能選一個)文件地址,且只能在媒體標簽沒有使用src屬性時使用。

       

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

      此標簽包含src、type、media三個屬性。

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

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

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

      (8) 一個完整的例子

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

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

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

      總結

      以上所述是小編給大家介紹的HTML網頁中插入視頻的方法小結,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對我們網站的支持!

      分享到:

      相關信息

      • HTML5之audio屬性

        audio主要支持的音頻格式:mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body> <!-- 方法一 --> <a...

        2020-03-04

      • HTML連載72-動畫效果及其他屬性

        一、動畫效果 1.過渡與動畫相類似,都需要三要素,那么他們的區別在哪里呢? ?答:過渡必須是人為的觸發才會執行動畫,動畫不需要人為的觸發就可以自動執行?動畫。 2.?相同點: (1)過度和動畫都是用來給元素添加動畫的;(2)過渡...

        2020-03-04

      系統教程欄目

      欄目熱門教程

      人氣教程排行

      站長推薦

      熱門系統下載

      天堂资源中文WWW,久久精品女人天堂AV免费观看,无码专区一ⅤA亚洲V天堂,免费观看在线AⅤ天堂视频