javascrpt Dom编程艺术有个例子代码实现不了

<!DOCTYPE html>
<html>
<head>
<title></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>Download 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 src="scripts/player.js"></script>
</body>
</html>

.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;
}

function createVideoControls(){
    var vids = document.getElementsByTagName('video');
    for (var i = 0; i < vids.length ; i++) {
        addControls( vid[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.onclik = function(){
        if(vid.ended){
            vid.currentTime = 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('paused');
        play.innerHTML = '&#x25BA;';
    },false);
 
    vid.addEventListener('ended', function(){
        vid.pause();
    },false);
}
 
    window.onload = function(){
        createVideoControls();
    }