今天借这个写一个博客,是如何用jq写个简易的播放器
jq相对于原生js和其他,可以说相对简单点,
希望各位大佬可以给点建议,得以完善
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
*{
margin: 0px;
padding: 0px;
}
video{
width: 400px;
height: 300px;
}
.play{
width: 50px;
height: 50px;
font-size: 40px;
cursor: pointer;
line-height: 50px;
display: inline-block;
}
.stop{
width: 20px;
height: 20px;
background: black;
cursor: pointer;
display: inline-block;
}
.progressbar {
margin-left: 34px;
margin-bottom: 7px;
width: 200px;
height: 5px;
background: #cccccc;
position: relative;
cursor: pointer;
display: inline-block;
}
.progressbar .cube {
/*TODO:maring与定位有关*/
position: absolute;
width: 20px;
height: 20px;
background: #f60;
margin-top: -7.5px;
margin-left: -10px;
cursor: pointer;
}
.full-screen {
width: 25px;
height: 25px;
box-sizing: border-box;
border: 5px dashed black;
cursor: pointer;
display: inline-block;
}
</style>
</head>
<body>
<video src="video/Billie Eilish - bad guy.mp4" ></video>
<div class="all">
<div class="play iconfont icon-play"></div>
<div class="stop"></div>
<div class="progressbar">
<div class="cube"></div>
<div class="download-progress"></div>
</div>
<div class="full-screen"></div>
</div>
<script type="text/javascript" src="lib/jquery-3.4.1.min.js" ></script>
<script>
$('.play').on('click',function(){
if ($(this).hasClass('icon-play')) {
$('video')[0].play();
} else{
$('video')[0].pause();
}
$(this).toggleClass('icon-play icon-pause')
})
$('.stop').on('click',function(){
var v = $('video')[0];
v.pause();
v.currentTime = 0;
$('.play')
.removeClass('icon-pause')
.addClass('icon-play')
})
$('.cube').on('mousedown',function(evt){
let downX = evt.clientX;
let downleft = $(this).position().left;
let v = $('video')[0]
$(window).on('mousemove',function(evt){
let distX = evt.clientX - downX;
let left = downleft + distX;
if (left<0) {
left = 0;
}
if(left>200){
left = 200;
}
var percent = left/200;
v.currentTime = v.duration * percent;
$('.cube').css({
left:left
})
})
$(window).on('mouseup',function(){
$(window).off('mouseover mouseup')
})
})
$('.progressbar').on('click',function(evt){
let v = $('video')[0]
var x = evt.offsetX;
var percent = x/200;
v.currentTime = v.duration * percent;
$('.cube').css({
left : x
})
})
$('video').on('timeupdate',function(){
var precent = this.currentTime/this.duration;
var x = 200*precent;
$('.cube').css({
left:x
})
})
$('.full-screen').on('click',function(){
var innerwidth = window.innerWidth;
var innerheight = window.innerHeight;
$('video').css({
position:"absolute",
left:0,
top:0,
width:innerWidth,
height:innerHeight
})
})
</script>
</body>
</html>
