導語

網頁的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标簽就可以在網頁開啟視頻功能，但是還需要兩個必備的參數。

Src（必備）

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

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

Controls（必備）

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

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

視頻播放器樣式

width和height（非必選）

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

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

<videosrc="hangge.mp4"controlswidth="400"height="300"></video>

Autoplay（非必選）

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

在一些浏覽器會自動禁止

<videosrc="hangge.mp4"controlsautoplay></video>

Loop（非必選）

循環播放

<videosrc="hangge.mp4"controlsloop></video>

Poster（非必選）

設置封面圖片

<videosrc="hangge.mp4"controlsposter="hangge.png"></video>

Preload（非必選）

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

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

<videosrc="hangge.mp4"controlspreload="none"></video>

source （非必選）

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

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

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

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

總結

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!