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

屬性	值	描述
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();
    }
}