本篇內(nèi)容主要講解“如何理解HTML5 video標簽”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習“如何理解HTML5 video標簽”吧!
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:域名與空間、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、龍里網(wǎng)站維護、網(wǎng)站推廣。
本文目錄:
1.使用標簽
2.加上一些必要參數(shù)
3.自動播放或自動加載
4.規(guī)范播放器
第一步:使用標簽
使用的方法很簡單,就是一句代碼:
代碼如下:
第二步:加上一些必要的參數(shù),比如播放視頻的路徑、是否顯示控制條
要播放視頻那就必須要視頻的地址,也就是要在標簽中設(shè)置src屬性。剛開始的時候做不了自己定義的控制條,那么就先用瀏覽器默認的,加上controls即可,于是就變成了這樣:
代碼如下:
第三步:讓視頻自動播放或自動加載
用播放器經(jīng)常需要做到的一點就是,頁面加載了就開始播放視頻,那么需要設(shè)置視頻自動播放,也就是設(shè)置autoplay屬性。
代碼如下:
有時候為了用戶的一些習慣卻不需要自動播放,但是為了讓用戶能夠快速能看到視頻,所以需要讓視頻自動加載,那么就需要設(shè)置preload屬性,需要注意的是這個并不會完整的加載這個視頻,而是只會加載前面的一部分。
代碼如下:
第四步:讓播放器規(guī)范一點
什么叫讓播放器規(guī)范一點?那就是有控制條(前面已經(jīng)介紹了)、開始播放前看到的畫面,規(guī)定播放器的大小。
播放器如果加載到了視頻是可以在一開始就看到一個初始化的畫面,但是往往會有這樣的要求,給視頻設(shè)置視頻開始看到的圖片(有時候為了吸引觀眾,會搞一張跟視頻關(guān)系不大的圖片,你懂的),或者是因為考慮網(wǎng)絡(luò)問題,在還沒加載視頻的情況下不要顯示一個黑屏給觀眾,這個時候也需要做這么一個設(shè)置,那就是設(shè)置poster屬性即可:
代碼如下:
一般來說在應(yīng)用過程中,播放器都是規(guī)定大小,所以要設(shè)置播放器的長寬,可以通過樣式表里面設(shè)置,也可以通過屬性width height來設(shè)置。需要注意的是設(shè)置播放器的寬高需要根據(jù)視頻的比例來設(shè)置,否則最后看到視頻是有空白,如果播放器的寬高超過視頻的像素可看到模糊的拉伸效果,所以在設(shè)置寬高的時候一定要注意,不過可以先只設(shè)置寬或者高來觀察,再得出準確的像素,比如
代碼如下:
在設(shè)置好寬度后,在瀏覽器中調(diào)試工具中看到了自適應(yīng)的高度是165,那么這個時候再設(shè)置高度為165
代碼如下:
到此,相信大家對“如何理解HTML5 video標簽”有了更深的了解,不妨來實際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學(xué)習!