HTML5如何實現(xiàn)圖片上顯示視頻的效果呢？謝謝你的邀請！瀏覽器支持：Internet Explorer 9、Firefox、opera、chrome和safari支持標簽。注意：Internet Ex

HTML5如何實現(xiàn)圖片上顯示視頻的效果呢？

謝謝你的邀請

！瀏覽器支持：

Internet Explorer 9、Firefox、opera、chrome和safari支持標簽。注意：Internet Explorer 8和更早版本不支持標記。

定義和用法

標記定義視頻，如電影剪輯或其他視頻流。

提示和注釋

提示：您可以在開始標記和結(jié)束標記之間放置文本內(nèi)容，以便舊瀏覽器可以顯示不支持該標記的信息。

屬性：

新建：HTML5中的新屬性。

屬性值描述autoplayautoplay。如果出現(xiàn)此屬性，則視頻將在準備就緒后立即播放。如果出現(xiàn)此屬性，則會向用戶顯示控件，例如播放按鈕。Highpixels設置視頻播放器的高度。如果此屬性出現(xiàn)在looploop中，則媒體文件將在播放完成后重新開始播放。mutedmute指定視頻的音頻輸出應靜音。posturl指定下載視頻時或用戶單擊播放按鈕之前要顯示的圖像。如果出現(xiàn)此屬性，則將在加載頁面并準備播放時加載視頻。如果使用自動播放，則忽略該屬性。Srcurl要播放的視頻的URL。寬度像素設置視頻播放器的寬度。點擊視頻預覽按鈕播放或暫停視頻

首先需要設置視頻預覽。這時，中郵物業(yè)很好地完成了工作。視頻的播放控制需要視頻的DOM事件。我在這里不詳細描述。稍后我將有機會移動它的詳細屬性。這里我們主要使用兩個事件play（）；pause（）。

以下是一個視頻播放或暫停，點擊我在過去兩天寫的視頻預覽圖片

HTML部分

JS部分：