1 html页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>movie</title>
<link rel="stylesheet" type="text/css" href="play.css">
</head>
<body>
<div class="video-wrapper">
<video id="movie" controls>
<source src="movie.mp4"/>
<source src="movie.ogg" type='video/ogg; codecs="theora,vorbis"'/>
<p>download movie as
<a href="movie.mp4">mp4</a>,
or<a href="movie.ogg">ogg</a>
</p>
</video>
</div>
<script src="play.js"></script>
</body>
</html>
2 js代码
首先找到页面的video元素,对其分别应用addControls函数
在addControls函数中,删除了video元素原来的Controls属性去掉其内置的空间,添加了几个DOM对象充当play/pause按钮,并把他们添加到video元素的子元素。
play按钮添加一个click事件,以便单击它播放影片:
利用play、pause和ended事件来修改play按钮的状态,并在影片未暂停情况下显示pause按钮。
function createVideoControls(){
var vids=document.getElementsByTagName('video');
for(var i=0;i<vids.length;i++){
addControls(vids[i]);
}
}
function addControls(vid){
vid.removeAttribute('controls');
vid.height=vid.videoHeight;
vid.width=vid.videoWidth;
vid.parentNode.style.height=vid.videoHeight+'px';
vid.parentNode.style.width=vid.videoWidth+'px';
var controls=document.createElement('div');
controls.setAttribute('class','controls');
var play=document.createElement('button');
play.setAttribute('title','play');
play.innerHTML='►';
controls.appendChild(play);
vid.parentNode.insertBefore(controls,vid);
play.οnclick=function(){
if(vid.ended){
vid.currentTime=0;
}
if(vid.paused){
vid.play();
}else{
vid.pause();
}
};
vid.addEventListener('play',function(){
play.innerHTML='▐▐';
play.setAttribute('paused',true);
},false);
vid.addEventListener('pause',function(){
play.setAttribute('paused');
play.innerHTML='►';
},false);
vid.addEventListener('ended',function(){
vid.pause();
},false);
}
window.οnlοad=function(){
createVideoControls();
}
3 css
.video-wrapper{
overflow:hidden;
}
.video-wrappper .controls{
position: absolute;
height: 30px;
width: 30px;
margin: auto;
background: rgba(0,0,0,0.5);
}
.video-wrapper button{
display: block;
width: 100%;
height: 100%;
border: 0;
cursor: pointer;
font-size: 17px;
color: #fff;
background: transparent;
}
.video-wrapper button[paused]{
font-size: 12px;
}