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: 0; 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(); }
最后出来是这样子的：
和书上的有点不一样，先不管了。这是视频：
看不了肿么办…………………………………………我传到腾讯视频了：传送门。