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

TeLiCH 2017-12-26

源自：JavaScript流程控制语句 1-4 编程练习