利用jQuery实现h5播放器播放组件
Posted 我是真的不会前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用jQuery实现h5播放器播放组件相关的知识，希望对你有一定的参考价值。
播放组件介绍
首先会H5播放组件其实自带video audio标签，只需要引入 添加属性 就可以自动在网页上播放，同样，vue和react也有相应的播放插件。比如vue-video-player 和react native的播放组件
这里提供一个npm地址
https://www.npmjs.com/package/vue-video-player
https://www.npmjs.com/package/react-native-video-controls
但是呢，作为前端工程师，多用原生js写逻辑在某种程度上是对基础夯实的最有效途径。那这里偷了个懒，说好的不用框架写 但还是用了jquery，毕竟可以稍微再某些节点操作上偷点懒
那废话不多说，上代码。
代码介绍
说实话，没啥介绍的 有jjquery和js基础的都看得懂 ，其实就是对各种dom对象和h5音视频api的操作。而且代码有各种注释，应该读懂不复杂，作为前端码农。这是入门必须有的基本功
引入的第三方库
jquery
最新版本即可 也可以通过npm下载 模块化导入
iconfont
用来做播放图标的 手搓css太丑了
音频
audio 标签中自己导入你需要导入的音频
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210710011218328.png
<audio src="./media/media.mp3"></audio>
注意是音频噢
html结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./css/media.css">
<script src="./js/jquery.js"></script>
</head>
<body>
<audio src="./media/media.mp3"></audio>
<div class="media">
<div class="playOrPause">
<i class="iconfont icon-bofang"></i>
</div>
<div class="time">
<span class="currentMinute">00</span>
:
<span class="currentSecond">00</span>
/
<span class="durationMinute">00</span>
:
<span class="durationSecond">00</span>
</div>
<div class="playRange">
<div class="currentRange"></div>
<div class="playBtn"></div>
</div>
<div class="volume">
<div class="volumeRange">
<div class="currentVolume"></div>
<div class="volumeBtn"></div>
</div>
<i class="iconfont icon-volume"></i>
</div>
</div>
</body>
<script src="./js/media.js"></script>
<script>
</script>
</html>
css
.media
width: 800px;
height: 50px;
border:3px solid #bbb;
margin:300px auto;
.media>div
float:left;
line-height: 50px;
margin:0 10px;
.media>div.playRange
width: 200px;
height: 6px;
background-color: #333;
margin:22px 10px;
border-radius:3px;
position: relative;
.media>div.playRange .currentRange
width: 100px;
height: 6px;
background-color: rgb(9, 143, 153);
position:absolute;
left: 0;
top: 0;
.media>div.playRange .playBtn
width: 20px;
height: 20px;
background-color:rgb(9, 143, 153);
border-radius:50%;
position: absolute;
left: 90px;
top: -7px;
.media .volume
position:relative;
.media .volumeRange
width: 4px;
height: 100px;
background-color: #333;
border-radius:2px;
position:absolute;
top:-100px;
left: 10px;
display:none;
.media .volumeRange .currentVolume
width: 4px;
height: 50px;
background-color: blue;
border-radius:2px;
position:absolute;
left: 0;
bottom:0;
.media .volumeRange .volumeBtn
width: 15px;
height: 15px;
border-radius:50%;
background-color: blue;
position:absolute;
left: -5px;
bottom:40px;
.media i
font-size: 24px;
js
// 控制音量的面板显示隐藏
$('.media .volume').hover(function()
$(this).find('.volumeRange').show()
,function()
$(this).find('.volumeRange').hide()
)
// 点击切换小图标
$('.media .playOrPause i').click(function()
if($(this).hasClass('icon-bofang'))
$(this).removeClass('icon-bofang').addClass('icon-zanting')
// 多媒体播放
$('audio')[0].play()
else
$(this).removeClass('icon-zanting').addClass('icon-bofang')
// 多媒体暂停
$('audio')[0].pause()
)
$('.media .volume i').click(function()
if($(this).hasClass('icon-volume'))
$(this).removeClass('icon-volume').addClass('icon-jingyin')
// 让多媒体静音
$('audio')[0].muted = true
// 让音量小球下来
$('.currentVolume').height(0)
console.log(-$('.volumeBtn').height()/2)
$('.volumeBtn').css('top',$('.volumeRange').height()-$('.volumeBtn').height()/2 + "px")
else
$(this).removeClass('icon-jingyin').addClass('icon-volume')
// 取消静音
$('audio')[0].muted = false
)
// 拖拽播放进度
$('.playRange').mousedown(function(e)
// 让小球过来 - 获取光标按下的位置，计算小球的left
var x = e.pageX;
var left = x - $('.playBtn').width()/2;
$('.playBtn').offset(left)
var width = $('.playBtn').position().left + $('.playBtn').width()/2
$('.currentRange').width( width )
// // 根据当前拖拽好的位置设置多媒体
// // 比例 = 当前播放过的进度条长度 / 进度条总长度
var percent = width / $('.playRange').width()
// 当前播放时长 = 总时长*比例
var duration = $('audio')[0].duration;
var currentTime = percent * duration;
$('audio')[0].currentTime = currentTime;
// $('audio')[0].pause()
// 移动
$(this).mousemove(function(e)
// 让小球过来 - 获取光标按下的位置，计算小球的left
var x = e.pageX;
var left = x - $('.playBtn').width()/2;
$('.playBtn').offset(left)
var width = $('.playBtn').position().left + $('.playBtn').width()/2
$('.currentRange').width( width )
$('audio')[0].pause()
$('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')
)
)
$('.playRange').mouseup(function(e)
$('.playRange').off('mousemove')
var width = $('.currentRange').width()
// 根据当前拖拽好的位置设置多媒体
// 比例 = 当前播放过的进度条长度 / 进度条总长度
var percent = width / $('.playRange').width()
// 当前播放时长 = 总时长*比例
var duration = $('audio')[0].duration;
var currentTime = percent * duration;
$('audio')[0].currentTime = currentTime;
$('audio')[0].play()
$('.media .playOrPause i').removeClass('icon-bofang').addClass('icon-zanting')
)
// 拖拽音量
$('.volumeRange').mousedown(function(e)
// 让小球过来 - 获取光标按下的位置，计算小球的left
var y = e.pageY;
var top = y - $('.volumeBtn').width()/2
$('.volumeBtn').offset(top)
$('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )
// 计算音量的比例
var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0
$('audio')[0].volume = volume
$(this).mousemove(function(e)
var y = e.pageY;
var top = y - $('.volumeBtn').width()/2
$('.volumeBtn').offset(top)
$('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )
// 计算音量的比例
var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0
$('audio')[0].volume = volume
)
)
$(document).mouseup(function(e)
$('.volumeRange').off('mousemove')
)
// 当多媒体加载完成的时候获取多媒体的播放时长
$('audio')[0].addEventListener('canplay',canplay)
function canplay()
var duration = this.duration; // 秒
// 换算成分钟和秒
var minute = parseInt(duration/60)
var second = parseInt(duration%60);
minute = minute<10?'0'+minute:minute;
second = second<10?'0'+second:second;
$('.durationMinute').text(minute)
$('.durationSecond').text(second)
// 将播放进度小球放到0的位置
$('.playBtn').css('left',-$('.playBtn').width()/2 + "px")
$('.currentRange').width(0如何利用阿里视频云开源组件，快速自定义你的H5播放器？