【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();
}

 

最后出来是这样子的：

 

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

 

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

 

posted @ 2017-01-22 16:29  天秤libra  阅读(277)  评论(0)  编辑  收藏  举报