一.实现思路
视频播放元素<video> ，频播放/暂停按钮 视频进度条，可以快速拖视频进行的对象 显示视频当前播放的时间和总时间 ，视频音量控制对象， 设置全屏视频按钮。
二.打造个性的视频播放器需要用到的属性
(1)controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
(2)currentTime : 开始播放到现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音
三.视频播放器需要用到的方法和事件
play() : 媒体播放 pause() : 媒体暂停
webkitRequestFullScreen():全屏
timeupdate : 时间更新 canplay: 可以播放
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
and,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input,
textarea,
select {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: none
}
del {
text-decoration: line-through
}
hr {
background: transparent;
border: 0;
clear: both;
color: transparent;
height: 1px;
margin: 0;
padding: 0
}
mark {
background-color: #ffffb3;
font-style: italic
}
input,
select {
vertical-align: middle
}
ins {
background-color: red;
color: white;
text-decoration: none
}
ol,
ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
a {
text-decoration: none;
}
body {
margin: 0;
padding: 0;
background: url(./images/20.jpeg) no-repeat;
background-size: cover;
}
.jp-video {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
background: #000;
}
.jp-video-360p {
width: 570px;
margin: 100px auto;
}
.jp-video-full {
width: 480px;
height: 270px;
position: static !important;
position: relative;
}
.jp-video-full .jp-jplayer {
top: 0;
left: 0;
position: fixed !important;
position: relative;
/* Rules for IE6 (full-screen) */
overflow: hidden;
z-index: 1000;
}
.jp-video-full .jp-gui {
position: fixed !important;
position: static;
/* Rules for IE6 (full-screen) */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.jp-video-full .jp-interface {
position: absolute !important;
position: relative;
/* Rules for IE6 (full-screen) */
bottom: 0;
left: 0;
z-index: 1000;
}
.jp-interface {
position: relative;
width: 100%;
height: 35px;
background-image: -webkit-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
background-image: -moz-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
background-image: -o-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
background-image: -ms-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
background-image: linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#f2f2f2', EndColorStr='#d1d1d1');
-webkit-box-shadow: inset 0px 1px 0px #f7f7f7,
inset 0px -1px 0px #e2e2e2;
-moz-box-shadow: inset 0px 1px 0px #f7f7f7,
inset 0px -1px 0px #e2e2e2;
box-shadow: inset 0px 1px 0px #f7f7f7,
inset 0px -1px 0px #e2e2e2;
}
div.jp-controls-holder {
clear: both;
width: 570px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
a.jp-play,
a.jp-pause {
width: 40px;
height: 35px;
float: left;
text-indent: -9999px;
outline: none;
}
a.jp-play {
background: url(./images/sprite.png) 0 0 no-repeat;
}
a.jp-pause {
background: url(./images/sprite.png) -40px 0 no-repeat;
display: none;
}
#separator {
background-image: url(./images/separator.png);
background-repeat: no-repeat;
width: 2px;
height: 35px;
float: left;
margin-top: 7px;
margin-right: 10px;
}
.jp-progress {
background: #706d6d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
0px 1px 0px rgba(255, 255, 255, .4);
-moz-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
0px 1px 0px rgba(255, 255, 255, .4);
box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
0px 1px 0px rgba(255, 255, 255, .4);
width: 280px;
height: 10px;
float: left;
margin-top: 13px;
}
.jp-seek-bar {
width: 0px;
height: 100%;
cursor: pointer;
}
.jp-seeking-bg {
background: #575555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.jp-play-bar {
background: url(./images/play-bar.png) left repeat-x;
width: 0px;
height: 10px;
position: relative;
z-index: 9999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.jp-play-bar span {
position: absolute;
top: -3px;
right: -12px;
background: url(./images/handle.png) no-repeat center;
width: 16px;
height: 17px;
}
.jp-current-time,
.jp-duration {
font-size: 11px;
font-family: Arial;
color: #444444;
margin-top: 13px;
float: left;
}
.jp-current-time {
float: left;
display: inline;
}
.jp-duration {
float: left;
display: inline;
text-align: right;
}
.jp-video .jp-current-time {
margin-left: 10px;
}
.jp-video .jp-duration {
margin-right: 10px;
}
.time-sep {
float: left;
margin: 13px 3px 0 3px;
font-size: 11px;
font-family: Arial;
color: #444444;
}
.jp-video a.jp-mute,
.jp-video a.jp-unmute {
text-indent: -9999px;
float: left;
height: 35px;
outline: none;
}
.jp-mute {
float: left;
background: url(./images/sprite.png) -80px 0 no-repeat;
margin-top: 1px;
margin-left: -10px;
width: 35px;
}
a.jp-unmute {
background: url(./images/sprite.png) -115px 0 no-repeat;
margin-top: 1px;
margin-left: -13px;
display: none;
width: 38px;
}
.jp-volume-bar {
float: left;
margin-top: 13px;
margin-right: 10px;
overflow: hidden;
width: 70px;
height: 10px;
cursor: pointer;
background: #706d6d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
0px 1px 0px rgba(255, 255, 255, .4);
-moz-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
0px 1px 0px rgba(255, 255, 255, .4);
box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
0px 1px 0px rgba(255, 255, 255, .4);
}
.jp-volume-bar-value {
background: rgba(112, 109, 109, 1);
width: 0px;
height: 10px;
position: relative;
min-width: 11px;
}
.jp-volume-bar-value span {
position: absolute;
top: 0px;
right: 0px;
background: url(./images/volume.png) no-repeat center;
width: 11px;
height: 10px;
}
.jp-full-screen {
background: url(./images/sprite.png) -150px 0 no-repeat;
float: left;
width: 40px;
height: 35px;
text-indent: -9999px;
margin-left: -10px;
outline: none;
}
.jp-restore-screen {
background: url(./images/sprite.png) -150px 0 no-repeat;
float: left;
width: 40px;
height: 35px;
text-indent: -9999px;
margin-left: -15px;
outline: none;
}
.box {
width: 510px;
margin: 100px auto;
position: relative;
}
#video {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<video id="video">
<source src="./video/20.mp4" />
</video>
<div class="jp-gui">
<div class="jp-interface">
<div class="jp-controls-holder">
<!--play and pause buttons-->
<a href="javascript:;" class="jp-play" tabindex="1" style="display: block;">play</a>
<a href="javascript:;" class="jp-pause" tabindex="1" style="display: none;">pause</a>
<span class="separator sep-1"></span>
<!--progress bar-->
<div class="jp-progress">
<div class="jp-seek-bar" style="width: 100%;">
<div class="jp-play-bar" style="width: 0%;"><span></span></div>
</div>
</div>
<!--time notifications-->
<div class="jp-current-time" style="padding: 0 2px 0 5px;">00:00</div>
<span class="time-sep">/</span>
<div class="jp-duration" style="padding: 0 5px 0 2px;">00:00</div>
<!--<span class="separator sep-2"></span>-->
<!--mute / unmute toggle-->
<!--<a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>-->
<!--<a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a>-->
<!--volume bar-->
<div class="jp-volume-bar">
<div class="jp-volume-bar-value" style="width: 90%;"><span class="handle"></span></div>
</div>
<!--<span class="separator sep-2"></span>-->
<!--full screen toggle-->
<a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a>
<!--<a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen"-->
<!--style="display: none;">restore screen</a>-->
</div>
<!--end jp-controls-holder-->
</div>
<!--end jp-interface-->
</div>
</div>
</body>
</html>
<script src="./js/index.js"></script>JS代码：
///获取要操作的dom对象
//视频dom对象
var video = document.getElementById('video');
//播放按钮
var play_ = document.getElementsByClassName('jp-play')[0];
//暂停按钮
var stop_ = document.getElementsByClassName('jp-pause')[0];
// 视频的总时间
var jp_duration = document.getElementsByClassName('jp-duration')[0];
//视频的播放时间
var jp_current_time = document.getElementsByClassName('jp-current-time')[0];
//全屏按钮
var jp_full_screen = document.getElementsByClassName('jp-full-screen')[0];
//视频的总进度条
var jp_seek_bar = document.getElementsByClassName('jp-seek-bar')[0];
//视频的播放进度
var jp_play_bar = document.getElementsByClassName('jp-play-bar')[0];
//音量当前进度条
var jp_volume_bar_value = document.getElementsByClassName('jp-volume-bar-value')[0];
//音量总进度条
var jp_volume_bar = document.getElementsByClassName('jp-volume-bar')[0];
// 当视频播放的时候 触发的函数 canplay
video.addEventListener('canplay', function () {
//点击播放按钮，播放视频，并将播放按钮隐藏
play_.addEventListener('click', function () {
//视频播放
video.play();
//播放按钮隐藏
play_.style.display = 'none';
//暂停按钮显示
stop_.style.display = 'block';
})
//点击暂停按钮，暂停视频，并将暂停按钮隐藏
stop_.addEventListener('click', function () {
//视频暂停
video.pause();
//暂停按钮隐藏
stop_.style.display = 'none';
//播放按钮显示
play_.style.display = 'block';
})
//全屏
jp_full_screen.onclick = function () {
video.webkitRequestFullScreen();
}
// 获取视屏的总时长，并添加进去
jp_duration.innerHTML = formatTime(video.duration);
// 获取播放的时间 最新时间 并添加
// timeupdate 时间更新 类似 setInterval
video.addEventListener('timeupdate', function () {
//获取当前最新播放时间，并添加
// console.log('aaaaaaaaaa');
// console.log(video.currentTime);
jp_current_time.innerHTML = formatTime(video.currentTime);
// 设置进度条的播放进度
// 当前播放时间 / 视频总时间
var scale_ = video.currentTime / video.duration;
jp_play_bar.style.width = scale_ * 100 + '%';
//点击播放进度条，改变播放进度
jp_seek_bar.addEventListener('click', function (e) {
e = e || window.event;
// 点击时间的点 距离外边的距离 e.offsetX
// 整个进度条的宽度 .offsetWidth
var scale_ = e.offsetX / this.offsetWidth;
// 正在播放的进度条
jp_play_bar.style.width = scale_ * 100 + '%';
// 当前播放时间的变化
jp_current_time.innerHTML = formatTime(scale_ * video.duration);
// 当前视频的播放进度
video.currentTime = scale_ * video.duration;
})
})
//音量设置
jp_volume_bar.onclick = function (e) {
e = e || window.event;
//点击音量点距离外边的距离 e.offsetX
//当前的音量长度 this.offsetWidth
var scale_ = e.offsetX / this.offsetWidth;
//当前的音量长度
jp_volume_bar_value.style.width = scale_ * 100 + "%";
//当前视频的音量
video.volume = scale_;
}
})
//将时间进行格式化
//获取到的时间以秒为单位
function formatTime(time) {
//小时
// var hour = Math.floor(time / 60 / 60);
// hour = hour >= 10 ? hour : '0' + hour;
//分钟
var min = Math.floor(time / 60);
min = min >= 10 ? min : '0' + min;
//秒
var sec = Math.floor(time % 60);
sec = sec >= 10 ? sec : '0' + sec;
var times = `${min}:${sec}`;
return times;
}
376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
