導語

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

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

視頻里學習

然而當你像往常一樣，打開網頁，準備播放視頻追劇時，突然發現無法打開，再三確定也不是中了病毒，這是怎麼回事？

錯誤提示

你可能以為只有你一個人中招，當你打開新聞，發現事情遠沒有那麼簡單。

大連車務段系統崩潰

一番排查後，你發現問題在於 Flash 所屬的 Adobe 公司全面終止了對它的支持，基於 Flash 的內容在 Adobe Flash Player 中被阻止運行。簡單點說，就是網頁里的視頻是基於flash製作的話，將會在網頁里無法播放！

Adobe公司終止支持flash的通告

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

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

要在網頁上開啟一個視頻，有多簡單呢？簡單到你無法想像。

Video

通過video標籤就可以在網頁開啟視頻功能，但是還需要兩個必備的參數。

Src（必備）

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

<video src="hangge.mp4"></video>

Controls（必備）

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

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

視頻播放器樣式

width和height（非必選）

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

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

<video src="hangge.mp4" controls width="400" height="300"></video>

Autoplay（非必選）

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

在一些瀏覽器會自動禁止

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

Loop（非必選）

循環播放

<video src="hangge.mp4" controls loop></video>

Poster（非必選）

設置封面圖片

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

Preload（非必選）

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

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

<video src="hangge.mp4" controls preload="none"></video>

source （非必選）

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

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

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

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

總結

總結