導語

網(wǎng)頁的4大表現(xiàn)形式：字、圖、視、聲。然而承擔網(wǎng)頁媒體功能的flash在2020年12月31日正式終結產(chǎn)品生命周期，更是在2021 年 1 月 12 日引發(fā)了大連車務段系統(tǒng)接近崩潰！既然flash被廢除，那么誰來承擔這些功能。尤其是視頻功能，追劇、在線教育、直播等等總不能沒有吧？

視頻，除了文字無法帶來的聲音視覺體驗外，還更承擔了人類文明的傳播。視頻已成為我們上網(wǎng)沖浪、追劇和學習必備的伴侶。

視頻里學習

然而當你像往常一樣，打開網(wǎng)頁，準備播放視頻追劇時，突然發(fā)現(xiàn)無法打開，再三確定也不是中了病毒，這是怎么回事？

錯誤提示

你可能以為只有你一個人中招，當你打開新聞，發(fā)現(xiàn)事情遠沒有那么簡單。

大連車務段系統(tǒng)崩潰

一番排查后，你發(fā)現(xiàn)問題在于 Flash 所屬的 Adobe 公司全面終止了對它的支持，基于 Flash 的內容在 Adobe Flash Player 中被阻止運行。簡單點說，就是網(wǎng)頁里的視頻是基于flash制作的話，將會在網(wǎng)頁里無法播放！

Adobe公司終止支持flash的通告

那有沒有其他辦法讓網(wǎng)頁正常播放視頻呢？有！就是HTML5！

HTML5是一個開放標準，優(yōu)先支持移動端，非常符合當下以手機為主流的設備；而且現(xiàn)如今所有瀏覽器都支持html5，你在網(wǎng)頁上看到的視頻大部分都是基于html5。html5的媒體功能可以完全代替flash的媒體功能，十分強大。

要在網(wǎng)頁上開啟一個視頻，有多簡單呢？簡單到你無法想象。

Video

通過video標簽就可以在網(wǎng)頁開啟視頻功能，但是還需要兩個必備的參數(shù)。

Src（必備）

視頻的播放源，可以是本地，也可以是在線地址。

Controls（必備）

視頻的控制器，這里要注意的是，每個系統(tǒng)的視頻控制器樣子都是不一樣，例如安卓、蘋果、window，甚至像MIUI這類系統(tǒng)都長得不一樣。

<video src='hangge.mp4' controls></video>

視頻播放器樣式

width和height（非必選）

視頻窗口的高度和寬度，如果都不設置，就會按原片的尺寸。

如果只設置了任意一個參數(shù)，另一個參數(shù)就會自動調整，按等比例縮放。

Autoplay（非必選）

自動播放，可以讓瀏覽器加載完視頻文件后立即播放.

在一些瀏覽器會自動禁止

<video src='hangge.mp4' controls autoplay></video>

Loop（非必選）

循環(huán)播放

Poster（非必選）

設置封面圖片

<video src='hangge.mp4' controls poster='hangge.png'></video>

Preload（非必選）

預加載類型，可以告訴瀏覽器應該怎樣加載一個媒體文件。

（1）值為auto：讓瀏覽器自動下載整個文件
（2）值為none：讓瀏覽器不必預先下載文件
（3）值為metadata：讓瀏覽器先獲取視頻文件開頭的數(shù)據(jù)塊，從而足以確定一些基本信息（比如視頻的總時長，第一幀圖像等）

source （非必選）

添加后備格式。事實上這個屬性在實際開發(fā)基本不用，寫法很繁瑣，而且一般視頻格式都是mp4。做了解即可。

<video controls>    <source src='hangge.mp4'type='video/mp4'>    <source src='hangge.webm'type='video/webm'></video>

以上的參數(shù)看起來好像有點多，實際上只需要兩個必選參數(shù)，視頻播放源和控制器，最好再設置固定的寬度和高度，即可制作一個視頻播放。

與其說是制作，更準確的說法是調出瀏覽器的視頻功能。瀏覽器集成了視頻播放的功能，像里面更低層的全屏控制、音量控制等等，都給我們封裝到Controls屬性里。如果還是用第三方flash制作視頻，那就可復雜多了！

總結

總結