HTML5-video標簽-實現點擊預覽圖播放或暫停視頻

 

剛剛參加工作，開始更多的接觸到一些新的知識，促使我開始了解html5和css3的新特性。這時我才真的發現到html5和css3的強大。
之前關於視頻的控制更多的是運用復雜來實現，但在html5中新加入了<video>標簽以及相應的DOM，通過這項新特性，我們能對網頁中的視頻進行更多簡單的控制。

以下屬性內容摘抄至W3CSchool

瀏覽器支持:

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

定義和用法

標簽定義視頻，比如電影片段或其他視頻流。

提示和注釋

提示：可以在開始標簽和結束標簽之間放置文本內容，這樣老的瀏覽器就可以顯示出不支持該標簽的信息。

屬性:

new : HTML5 中的新屬性。

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則視頻在就緒后馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
height	pixels	設置視頻播放器的高度。
loop	loop	如果出現該屬性，則當媒介文件完成播放后再次開始播放。
muted	muted	規定視頻的音頻輸出應該被靜音。
poster	URL	規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。
preload	preload	如果出現該屬性，則視頻在頁面加載時進行加載，並預備播放。如果使用 “autoplay”，則忽略該屬性。
src	url	要播放的視頻的 URL。
width	pixels	設置視頻播放器的寬度。

點擊視頻預覽圖實現播放或暫停視頻

首先要設置video的預覽圖，這時<video> 中的poster屬性很好的完成了這個工作。
關於視頻的播放控制需要用到video的dom事件，這里先不詳述了，以后有機會再將其詳細屬性搬運過來。這里主要運用到了play() ；pause()這兩個事件。

下面是一個自己這兩天寫的通過點擊視頻預覽圖實現視頻播放或暫停

HTML部分：

        <div class="video_main dw">
            <ul>
                <li class="video_main_video left">
                    <video id="videoPlay1" width="262" height="195" src="video/audio.mp4" poster="img/video.jpg" loop="loop" x-webkit-airplay="true" webkit-playsinline="true">
                        您的瀏覽器暫不支持播放該視頻，請升級至最新版瀏覽器。
                    </video>
                </li>
            </ul>
        </div>  

js部分:

var video1=document.getElementById("videoPlay1");

video1.onclick=function(){
    if(video1.paused){
        video1.play();
    }else{
        video1.pause();
    }
}

CSS部分對視頻播放 不起到影響，暫時就先不在這里貼出來了。

 

 

----

 

作者博客：[pspgbhu](http://ghosertblog.github.com)

作者GitHub：https://github.com/pspgbhu

歡迎轉載，但請注明出處，謝謝！