因为我的这个播放器是要插入文档的 ，所以制作比较简单，并没有使用controls，暂停pause和播放play按钮包括poster都是自定义，其实还可以加上一些音量、进度条、播放时长、全屏等功能，大家可以去看一下文档自己再基础上修改
话不多说，直接贴上代码
视频播放器
我就是想播放一下视频行不行
你的浏览器不支持html5的video标签
var video1=document.getElementById("video1");
var video1_poster=document.getElementById("video1_poster");
var video1_btn=document.getElementById("video1_btn");
var video1_mask=document.getElementById("video1_mask");
video1_btn.addEventListener('click',clickBtn,false);
function clickBtn(){
if(video1.paused){
video1_poster.style.display="none";
video1_btn.style.display="block";
video1_btn.style.backgroundColor="green";
video1.play();
}else{
video1_btn.style.display="block";
video1_btn.style.backgroundColor="red";
video1.pause();
};
};
video1.addEventListener('ended', endedPlay, false);
function endedPlay(){
video1.load();
video1_poster.style.display="block";
video1_btn.style.display="block";
video1_btn.style.backgroundColor="red";
};
video1_mask.addEventListener('click',function(){
video1_btn.style.display="block";
setTimeout( function (){
video1_btn.style.display="none";
},1500);
console.log("c");
},false);
封面效果如图
播放中、播放、暂停图
为什么使用这个呢？为了就是阻止事件冒泡，我的事件是这样的 当开始播放时，点击屏幕先出现暂停播放按钮再点击一下实现暂停播放功能，至于为什么不用mouseover和mouseout呢，因为移动端不支持啊，所以只能用这个方法；
addEventListener('事件', 函数名, false)