首頁 > web前端 > H5教程 > HTML5 video標籤(播放器)學習筆記(一):使用入門_html5教學技巧

HTML5 video標籤(播放器)學習筆記(一):使用入門_html5教學技巧

WBOY
發布: 2016-05-16 15:47:01
原創
1652 人瀏覽過

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

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

本文目錄:

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

第一步:使用標籤

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

複製代碼
代碼如下:


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

要播放影片那就必須要影片的位址,也就是要在標籤中設定src屬性。剛開始的時候做不了自己定義的控制條,那麼就先用瀏覽器預設的,加上controls即可,於是就變成了這樣:

複製程式碼
程式碼如下:


第三步:讓影片自動播放或自動載入

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

複製程式碼
程式碼如下:


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

複製程式碼
程式碼如下:


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

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

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



複製程式碼程式碼如下:
程式碼如下:



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



在設定好寬度後,在瀏覽器中調試工具中看到了自適應的高度是165,那麼這個時候再設定高度為165

複製代碼
代碼如下:

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板