html5+js制作自己的视频控件(实现弹幕效果，拖动进度条，播放时间) 一 |
您所在的位置：网站首页 › 进度条拖动插件没反应 › html5+js制作自己的视频控件(实现弹幕效果，拖动进度条，播放时间) 一 |
html5+js制作自己的视频控件(实现弹幕效果，拖动进度条，播放时间) 一
|
制作自己的视频控件
今天我们自己制作网页视频播放控件。效果图如下： 在h5中新添的视频标签video，设置了controls属性后，会出现默认的控件。而我们希望给这个控件添加更多的效果和样式，所以controls属性我们不设置，通过js来制作自己的播放器。 css样式我会在最后贴出，我们的目标是实现控件的功能 html结构 播放 00:00/00:00 发射 倍速 2x 1.5x 1.25x 1x 0.5x 音量 全屏 播放和暂停所用到的知识点： play()方法让视频播放 pause()方法让视频暂停 paused属性 判断当前视频是否是暂停 给播放按钮添加点击事件，通过paused判断当前视频的状态。 代码如下 var video=document.getElementsByClassName("video")[0]; var play=document.getElementsByClassName("play")[0]; // 播放按钮 play.οnclick=function(){ // 判断视频是否暂停 if(video.paused){ video.play(); play.innerHTML="暂停"; }else{ video.pause(); play.innerHTML="播放"; } } 视频当前播放时间和总时间所用到的知识点： currentTime属性 获取当前视频播放时间 duration属性 获取当前视频的总时长 然后我们在控制台使用计时器打印这两个属性看一下： 然后当前的秒数应该是 （当前的时间%60） var nowSecond=parseInt(nowTime%60)>10?`${parseInt(nowTime%60)}`:`0${parseInt(nowTime%60)}`那么总时长和当前时长一个模式就可以了 最后看看这个计时器内部所有的代码： var vidtime=document.getElementsByClassName("timer")[0]; var timer=setInterval(function () { // 当前时长，以及总时长 var nowTime=video.currentTime; var allTime=video.duration; // 当前准确的时间速 var nowMinute=parseInt(nowTime/60)>10?`${parseInt(nowTime/60)}:`:`0${parseInt(nowTime/60)}:` var nowSecond=parseInt(nowTime%60)>10?`${parseInt(nowTime%60)}/`:`0${parseInt(nowTime%60)}/` //总时长解析后的时间 var allMinute=parseInt(allTime/60)>10?`${parseInt(allTime/60)}:`:`0${parseInt(allTime/60)}:` var allSecond=parseInt(allTime%60)>10?`${parseInt(allTime%60)}`:`0${parseInt(allTime%60)}` console.log(nowMinute,nowSecond,allMinute,allSecond); vidtime.innerHTML=`${nowMinute}${nowSecond}${allMinute}${allSecond}` }, 1000)效果如图：
进度条并没有用到什么其他的属性 我们实现的进度条的思路是: 一个大的div来表示总的进度条，然后当前进度条在播放的时候改变进度条的宽度，让他慢慢铺满总的进度条。 当前进度条的宽度=当前时间/总时间*总宽度； var loadfather=document.getElementsByClassName("loadfather")[0]; 下面代码写在上面的计时器里 // 获取总进度条的长度 var loadWidth=loadfather.offsetWidth; // 计算当前进度条的宽度 var second_width=nowTime/allTime*loadWidth; // 改变进度条的位置 loadfather.children[0].style.width = second_width + 'px'; loadfather.children[1].style.left = second_width + 'px';效果如下： 我们在点击到进度条上时，通过事件对象获取当前鼠标点击位置的x轴位置。 // 点击进度条进行修改视频当前时间 loadfather.onclick = function(e){ loadfather.children[0].style.width = e.offsetX + 'px'; loadfather.children[1].style.left = e.offsetX + 'px'; // 对应的播放时间 // 当前点击位置 / 进度条的总宽度 * 总时长 video.currentTime = e.offsetX/loadfather.clientWidth *video.duration; }上面我们说了当前进度条的宽度=当前时间/总时间*总宽度； 那么鼠标点击进度条时的x轴宽度就是当前进度条的宽度 反过来推当前时间=当前点击位置 / 进度条的总宽度 * 总时长， 然后我们改变当前播放的时间 （也就是.currentTime属性），在计时器又一次运行时，视频的进度就会被修改。 下一篇我们把后面得功能实现！ （（如果这篇文章有什么问题请及时联系我！）） |
我们希望时间以00:00/00:00的格式显示出来，要怎么办呢？ 我们先看当前时间，00:00，一分60秒那么当前的分钟数应该是 （当前的时间/60） 如果当前分钟数小于10那么我就在他的前面拼一个0（就是为了让格式好看！）
【本文地址】
今日新闻 |
推荐新闻 |