【js编程艺术】小制作六

时间:2021-02-16 12:53:56

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 = "&#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 = "▐▐";
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();
}

最后出来是这样子的:

【js编程艺术】小制作六

和书上的有点不一样,先不管了。这是视频:

看不了肿么办…………………………………………我传到腾讯视频了:传送门