如何理解HTML5video標(biāo)簽-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“如何理解HTML5 video標(biāo)簽”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何理解HTML5 video標(biāo)簽”吧!

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供揭東網(wǎng)站建設(shè)、揭東做網(wǎng)站、揭東網(wǎng)站設(shè)計(jì)、揭東網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、揭東企業(yè)網(wǎng)站模板建站服務(wù)，十年揭東做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

本文目錄:

1.使用標(biāo)簽
2.加上一些必要參數(shù)
3.自動(dòng)播放或自動(dòng)加載
4.規(guī)范播放器

第一步：使用標(biāo)簽

使用的方法很簡(jiǎn)單，就是一句代碼：

代碼如下:

<video></video>

第二步：加上一些必要的參數(shù)，比如播放視頻的路徑、是否顯示控制條

要播放視頻那就必須要視頻的地址，也就是要在標(biāo)簽中設(shè)置src屬性。剛開始的時(shí)候做不了自己定義的控制條，那么就先用瀏覽器默認(rèn)的，加上controls即可，于是就變成了這樣：

代碼如下:

<video controls src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

第三步：讓視頻自動(dòng)播放或自動(dòng)加載

用播放器經(jīng)常需要做到的一點(diǎn)就是，頁(yè)面加載了就開始播放視頻，那么需要設(shè)置視頻自動(dòng)播放，也就是設(shè)置autoplay屬性。

代碼如下:

<video controls autoplay=true src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

有時(shí)候?yàn)榱擞脩舻囊恍┝?xí)慣卻不需要自動(dòng)播放，但是為了讓用戶能夠快速能看到視頻，所以需要讓視頻自動(dòng)加載，那么就需要設(shè)置preload屬性，需要注意的是這個(gè)并不會(huì)完整的加載這個(gè)視頻，而是只會(huì)加載前面的一部分。

代碼如下:

<video controls preload="auto" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

第四步：讓播放器規(guī)范一點(diǎn)

什么叫讓播放器規(guī)范一點(diǎn)？那就是有控制條（前面已經(jīng)介紹了）、開始播放前看到的畫面，規(guī)定播放器的大小。

播放器如果加載到了視頻是可以在一開始就看到一個(gè)初始化的畫面，但是往往會(huì)有這樣的要求，給視頻設(shè)置視頻開始看到的圖片（有時(shí)候?yàn)榱宋^眾，會(huì)搞一張跟視頻關(guān)系不大的圖片，你懂的），或者是因?yàn)榭紤]網(wǎng)絡(luò)問題，在還沒加載視頻的情況下不要顯示一個(gè)黑屏給觀眾，這個(gè)時(shí)候也需要做這么一個(gè)設(shè)置，那就是設(shè)置poster屬性即可：

代碼如下:

<video controls preload="auto" poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"  width="640" height="264" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

一般來說在應(yīng)用過程中，播放器都是規(guī)定大小，所以要設(shè)置播放器的長(zhǎng)寬，可以通過樣式表里面設(shè)置，也可以通過屬性width height來設(shè)置。需要注意的是設(shè)置播放器的寬高需要根據(jù)視頻的比例來設(shè)置，否則最后看到視頻是有空白，如果播放器的寬高超過視頻的像素可看到模糊的拉伸效果，所以在設(shè)置寬高的時(shí)候一定要注意，不過可以先只設(shè)置寬或者高來觀察，再得出準(zhǔn)確的像素，比如

代碼如下:

<video controls preload="auto" width=300 poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

在設(shè)置好寬度后，在瀏覽器中調(diào)試工具中看到了自適應(yīng)的高度是165，那么這個(gè)時(shí)候再設(shè)置高度為165

代碼如下:

<video controls preload="auto" width=300 height=165 poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

到此，相信大家對(duì)“如何理解HTML5 video標(biāo)簽”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前文章：如何理解HTML5video標(biāo)簽-創(chuàng)新互聯(lián)
新聞來源：http://muchs.cn/article8/dshgop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營(yíng)銷推廣、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)