点击视频预览图实现播放或暂停视频

点击视频预览图实现播放或暂停视频

首先要设置video的预览图，这时<video> 中的poster属性很好的完成了这个工作。 
关于视频的播放控制需要用到video的dom事件，这里先不详述了，以后有机会再将其详细属性搬运过来。这里主要运用到了play() ；pause()这两个事件。

下面是一个自己这两天写的通过点击视频预览图实现视频播放或暂停

<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 video=document.getElementById("videoPlay1");

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