【js编程艺术】小制作六

来源:转载

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 = "&#x25BA"; 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 = "&#x2590;&#x2590;"; play.setAttribute("paused", true); }, false); vid.addEventListener("pause", function(){ play.removeAttribute("pause"); play.innerHTML = "&#x25BA;"; }, false); vid.addEventListener("ended", function(){ vid.pause(); }, false);}window.onload = function(){ createVideoControls();}

 

最后出来是这样子的:

 

和书上的有点不一样,先不管了。

 那个视频就不上传了。

 

分享给朋友:
您可能感兴趣的文章:
随机阅读: