手工SEO

手工SEO首頁 DEDE教程 正文

HTML5 video標簽(播放器)學習筆記(一):使用入門

手工SEO 2020-01-24 08:02:38 DEDE教程 52℃ 手工SEO

近有在學習html5中video標簽(播放器)的使用,這里做一些學習筆記,方便自己查閱和記錄,本文是第一篇,將介紹的是使用該標簽初始化該做的哪些工作。

網上的教程其實也不少了 w3cschool里面的最為簡單而詳細,那么這幾介紹的是一些更為直接的應用。

本文目錄:

1.使用標簽
2.加上一些必要參數
3.自動播放或自動加載
4.規范播放器 

第一步:使用標簽

使用的方法很簡單,就是一句代碼:

復制代碼

代碼如下:


<video></video>

第二步:加上一些必要的參數,比如播放視頻的路徑、是否顯示控制條

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

復制代碼

代碼如下:


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

第三步:讓視頻自動播放或自動加載

用播放器經常需要做到的一點就是,頁面加載了就開始播放視頻,那么需要設置視頻自動播放,也就是設置autoplay屬性。

復制代碼

代碼如下:


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

有時候為了用戶的一些習慣卻不需要自動播放,但是為了讓用戶能夠快速能看到視頻,所以需要讓視頻自動加載,那么就需要設置preload屬性,需要注意的是這個并不會完整的加載這個視頻,而是只會加載前面的一部分。

復制代碼

代碼如下:


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

第四步:讓播放器規范一點

什么叫讓播放器規范一點?那就是有控制條(前面已經介紹了)、開始播放前看到的畫面,規定播放器的大小。

播放器如果加載到了視頻是可以在一開始就看到一個初始化的畫面,但是往往會有這樣的要求,給視頻設置視頻開始看到的圖片(有時候為了吸引觀眾,會搞一張跟視頻關系不大的圖片,你懂的),或者是因為考慮網絡問題,在還沒加載視頻的情況下不要顯示一個黑屏給觀眾,這個時候也需要做這么一個設置,那就是設置poster屬性即可:

復制代碼

代碼如下:


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


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

復制代碼

代碼如下:


<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>


在設置好寬度后,在瀏覽器中調試工具中看到了自適應的高度是165,那么這個時候再設置高度為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>

總結:通過這四個步驟,可以完成了一個播放器的基本設置和使用了,主要是要了解播放器的一些屬性和應用的場合,更多的應用那就要通過JS來控制了。

上一篇:HTML5 video標簽(播放器)學習筆記(二):播放控制

下一篇:HTML5 Canvas中繪制矩形實例

網站分類
標簽列表
问道多少级队伍号赚钱