HTML5举例：简单的视频播放器
我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。
index.html的代码如下：
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- 引入字体图标的文件-->
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<style>
*{
margin: 0;
padding: 0;
}
/*多媒体标题*/
figcaption{
text-align: center;
line-height: 150px;
font-family: "Microsoft Yahei";
font-size:24px;
}
/* 播放器*/
.palyer{
width: 720px;
height: 360px;
margin:10px auto;
border: 1px solid #000;
background: url(images/loading.gif) center no-repeat #000;
background-size:auto 100%;
position: relative;
}
.palyer video{
height: 100%;
display: block;
margin: 0 auto;
}
/* 控制条*/
.controls{
width: 700px;
height: 40px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 5px;
}
/*播放按钮*/
.play-pause{
width: 20px;
height: 20px;
position: absolute;
left: 10px;
top: 10px;
text-align: center;
line-height: 20px;
cursor: pointer;
}
/*时间区域*/
.timer{
width: 145px;
height: 20px;
position: absolute;
left: 40px;
top: 10px;
font-size: 12px;
line-height: 20px;
}
/*进度条*/
.progress{
width: 340px;
height: 10px;
position: absolute;
left: 195px;
top: 15px;
background-color: #555;
border-radius: 5px;
cursor: pointer;
}
.progress span{
width: 0;
height: 10px;
position: absolute;
left: 0;
top: 0;
background-color: #fff;
border-radius: 5px;
}
/*声音控制*/
.sound{
width: 25px;
height: 20px;
position: absolute;
left: 545px;
top: 10px;
line-height: 20px;
text-align: center;
cursor: pointer;
}
/*声音进度条*/
.sound-progress{
width: 100px;
height: 10px;
position: absolute;
left: 580px;
top: 15px;
background-color: #555;
border-radius: 5px;
cursor: pointer;
}
.sound-progress span{
width: 0;
height: 10px;
position: absolute;
left: 0;
top: 0;
background-color: #fff;
border-radius: 5px;
}
/*全屏控制*/
.full-screen{
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 10px;
text-align: center;
line-height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<figure>
<figcaption>HTML5视频播放器</figcaption>
<div class="palyer">
<video src="video/fun.mp4"></video>
<div class="controls">
<a href="javascript:;" class="play-pause">
<i class="fa fa-play"></i>
</a>
<div class="timer">
<span class="current">0:00:00</span> /
<span class="total">0:00:00</span>
</div>
<div class="progress">
<span></span>
</div>
<a href="javascript:;" class="sound">
<i class="fa fa-volume-up"></i>
</a>
<div class="sound-progress">
<span></span>
</div>
<a href="javascript:;" class="full-screen">
<i class="fa fa-arrows-alt"></i>
</a>
</div>
</div>
</figure>
<script>
//获取需要操作的元素
var video = document.querySelector('video');
var playPause = document.querySelector('.play-pause');
var currentTime = document.querySelector('.current');
var totalTime = document.querySelector('.total');
var progress = document.querySelector('.progress');
var progressSpan = document.querySelector('.progress span');
var sound = document.querySelector('.sound');
var soundProgress = document.querySelector('.sound-progress');
var soundProgressSpan = document.querySelector('.sound-progress span');
var fullScreen = document.querySelector('.full-screen');
var icon = document.querySelector('.play-pause i');
var timer;
//格式化时间
function formatTime(time){
var h = Math.floor(time / 3600);
var m = Math.floor(time % 3600 / 60);
var s = Math.floor(time % 60);
h = h > 0 ? (h < 10 ? '0' + h : h) + ':' : '';
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
return h + m + ':' + s;
}
//视频可以播放
video.oncanplay = function(){
//获取视频总时长
var total = video.duration;
//格式化总时长
totalTime.innerHTML = formatTime(total);
};
//播放/暂停控制
playPause.onclick = function(){
if(video.paused || video.ended){
video.play();
icon.className = 'fa fa-pause';
//开启定时器
timer = setInterval(function(){
//获取当前播放时间
var current = video.currentTime;
//格式化当前播放时间
currentTime.innerHTML = formatTime(current);
//计算播放进度
var w = 340 * current / video.duration;
//设置进度条宽度
progressSpan.style.width = w + 'px';
}, 30);
}else{
video.pause();
icon.className = 'fa fa-play';
//清除定时器
clearInterval(timer);
}
};
//进度条控制
progress.onclick = function(e){
//计算点击位置的时间
var time = video.duration * (e.offsetX / 340);
//设置当前播放时间
video.currentTime = time;
};
//声音控制
sound.onclick = function(){
if(video.muted){
video.muted = false;
sound.innerHTML = '<i class="fa fa-volume-up"></i>';
soundProgressSpan.style.width = video.volume * 100 + 'px';
}else{
video.muted = true;
sound.innerHTML = '<i class="fa fa-volume-off"></i>';
soundProgressSpan.style.width = '0';
}
};
//音量控制
soundProgress.onclick = function(e){
//计算点击位置的音量
var volume = e.offsetX / 100;
//设置音量
video.volume = volume;
//设置进度条宽度
soundProgressSpan.style.width = e.offsetX + 'px';
};
//全屏控制
fullScreen.onclick = function(){
if(video.requestFullscreen){
video.requestFullscreen();
}else if(video.webkitRequestFullscreen){
video.webkitRequestFullscreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.msRequestFullscreen){
video.msRequestFullscreen();
}
};
//视频播放结束
video.onended = function(){
video.currentTime = 0;
icon.className = 'fa fa-play';
clearInterval(timer);
};
</script>
</body>
</html>代码解析
这个简单的视频播放器实现了以下功能：
- 播放/暂停控制：点击播放按钮可以播放或暂停视频
- 时间显示：显示当前播放时间和总时长
- 进度条控制：可以通过点击进度条来跳转到视频的不同位置
- 声音控制：可以静音/取消静音，以及调节音量大小
- 全屏控制：可以将视频切换到全屏模式
HTML结构
HTML结构主要包括：
- 一个
<figure>元素，包含标题和播放器 - 播放器由视频元素和控制条组成
- 控制条包含播放/暂停按钮、时间显示、进度条、声音控制和全屏按钮
CSS样式
CSS样式主要用于：
- 设置播放器的大小和背景
- 定位和样式化控制条及其中的各个元素
- 设置进度条和音量条的样式
JavaScript功能
JavaScript代码实现了以下功能：
- 格式化时间显示
- 播放/暂停控制
- 进度条控制
- 声音控制
- 全屏控制
- 视频播放结束处理
总结
这个例子展示了如何使用HTML5的<video>元素和JavaScript来创建一个自定义的视频播放器。通过这个例子，我们可以了解到HTML5视频API的基本使用方法，以及如何通过JavaScript来控制视频的播放。
在实际开发中，我们可以根据需求进一步完善这个播放器，比如添加播放列表、字幕显示、画质切换等功能。