1.html
/* movie.html*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Video</title>
<link rel="stylesheet" type="text/css" href="styles/player.css">
</head>
<body>
<div class="video-wrapper">
<video id="movie" controls>
<source src="movie.mp4" />
<source src="movie.webm" type="video/webm; codecs='vp8, vorbis'" />
<source src="movie.ogv" type="video/ogg; codecs='theora, vorbis'" />
<p>
Dowmload movie as
<a href="movie.mp4">MP4</a>,
<a href="movie.webm">WebM</a>,
or <a href="movie.ogv">Ogg</a>.
</p>
</video>
</div>
<script type="text/javascript" src="scripts/player.js"></script>
</body>
</html>
2.css
/* palyer.css*/
.video-wrapper{
overflow: hidden;
}
.video-wrapper .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:;
cursor: pointer;
font-size: 17px;
color: #fff;
background: transparent;
}
.video-wrapper button[paused]{
font-size: 12px;
}
3.js
/* player.js*/
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.onclick = function(){
if(vid.ended){
vid.currrentTime = 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.removeAttribute("pause");
play.innerHTML = "►";
}, false); vid.addEventListener("ended", function(){
vid.pause();
}, false);
} window.onload = function(){
createVideoControls();
}
最后出来是这样子的:
和书上的有点不一样,先不管了。这是视频:
看不了肿么办…………………………………………我传到腾讯视频了:传送门。