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

網(wǎng)上的教程其實(shí)也不少了 w3cschool里面的最為簡(jiǎn)單而詳細(xì)，那么這幾介紹的是一些更為直接的應(yīng)用。

本文目錄:

1.使用標(biāo)簽

2.加上一些必要參數(shù)

3.自動(dòng)播放或自動(dòng)加載

4.規(guī)范播放器

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

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

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

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

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

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

總結(jié)：通過(guò)這四個(gè)步驟，可以完成了一個(gè)播放器的基本設(shè)置和使用了，主要是要了解播放器的一些屬性和應(yīng)用的場(chǎng)合，更多的應(yīng)用那就要通過(guò)JS來(lái)控制了。

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的html5视频播放器脚本怎么用,HTML5 video标签（播放器）学习笔记（一）:使用入门...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。