此处出自《JavaScript DOM编程艺术(第二版)》,修改播放按钮
movie.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="video-wrapper">
<video id="movie" controls>
<source src="movie.mp4"/>
<p>Download movie as <a href="movie.mp4">MP4</a></p>
</video>
</div>
<script src="scripts/player.js"></script>
</body>
</html>
player.js
function createVideoControls() {
// 找到页面中的video元素,分别应用addControl函数
var vids = document.getElementsByTagName('video');
for(var i = 0; i< vids.length; i++){
addControls(vids[i]);
}
}
function addControls(vid) {
// 删除原来的control属性,去掉内置控件
vid.removeAttribute('controls');
vid.height = vid.videoHeight;
vid.width = vid.videoWidth;
vid.parentElement.style.height = vid.videoHeight + 'px';
vid.parentNode.style.width = vid.videoWidth + 'px';
// 创建新控件
var controls = document.createElement('div');
controls.setAttribute('class', 'control');
// 创建播放按钮
var play = document.createElement('button');
play.setAttribute('title','Play');
// '►' 播放符号
play.innerHTML = '►';
// 添加播放按钮
controls.appendChild(play);
// 控件加入播放界面
vid.parentNode.insertBefore(controls, vid);
// 单击播放影片
play.onclick = function () {
if(vid.ended){
vid.currentTime = 0;
}
if(vid.paused){
vid.play();
} else{
vid.pause();
}
};
// 利用play、pause和ended事件来修改Play按钮的状态,并在影片为暂停的情况下显示Pause按钮
vid.addEventListener('play',function () {
play.innerHTML = '▐▐';
play.setAttribute('paused', true);
},false);
vid.addEventListener('pause', function () {
play.removeAttribute('paused');
play.innerHTML = '►';
},false);
vid.addEventListener('ended',function () {
vid.pause();
},false);
}
window.onload = function () {
createVideoControls();
};
最后效果
未修改添加控件的样式,所以很丑ㄟ( ▔, ▔ )ㄏ