網(wǎng)友解答: 感謝酷米邀請！瀏覽器支持:Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 標(biāo)簽。 注釋：Internet

感謝酷米邀請！

瀏覽器支持:

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 標(biāo)簽。 注釋：Internet Explorer 8 以及更早的版本不支持 標(biāo)簽。

定義和用法

標(biāo)簽定義視頻，比如電影片段或其他視頻流。

提示和注釋

提示：可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標(biāo)簽的信息。

屬性:

new : HTML5 中的新屬性。

屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。heightpixels設(shè)置視頻播放器的高度。looploop如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。mutedmuted規(guī)定視頻的音頻輸出應(yīng)該被靜音。posterURL規(guī)定視頻下載時(shí)顯示的圖像，或者在用戶點(diǎn)擊播放按鈕前顯示的圖像。preloadpreload如果出現(xiàn)該屬性，則視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 “autoplay”，則忽略該屬性。srcurl要播放的視頻的 URL。widthpixels設(shè)置視頻播放器的寬度。點(diǎn)擊視頻預(yù)覽圖實(shí)現(xiàn)播放或暫停視頻

首先要設(shè)置video的預(yù)覽圖，這時(shí) 中的poster屬性很好的完成了這個(gè)工作。 關(guān)于視頻的播放控制需要用到video的dom事件，這里先不詳述了，以后有機(jī)會(huì)再將其詳細(xì)屬性搬運(yùn)過來。這里主要運(yùn)用到了play() ；pause()這兩個(gè)事件。

下面是一個(gè)自己這兩天寫的通過點(diǎn)擊視頻預(yù)覽圖實(shí)現(xiàn)視頻播放或暫停

HTML部分：

js部分:

這要是你自己敲的話可能有點(diǎn)費(fèi)勁了，你的交互要做到哭，最好的就是找(o^)~^/的網(wǎng)站自己搭個(gè)玩玩吧，在圖片上添加效果，小的GIF沒有問題，可以試試去，但是視頻我沒有嘗試過，希望對你有幫助