用js自定义视频播放器

今天简单介绍一下视频播放器的写法和播放器

功能列表：0.视频加载完成前的初始1.控制视频开始暂停；2.实时监控进度更新进度条和时间3.控制声音大小；4.控制倍速；5.控制全屏；6.进度条点击更改视频进度；7.拖动视频进度条

首先在视频加载前先要完成一些初始化

html总体代码

                    <div class="vido_Box"><video id="vido" src="../photo/十连出金.mp4"></video></div><div class="vido_figure"></div><!-- 视频未加载出来的加载中 --><div class="function_Box"><div class="control_box"><div class="vido_control_left"><div id="play"></div><!-- 开始，暂停 --><div id="vido_next"></div><div id="vido_voice"><!-- 控制音量 --><div class="voice_content"><div class="voice_num">100</div><div class="voice_strip"><div class="voice_all"><div class="voice_now"></div></div></div></div></div><div class="vido_time"><!-- 控制时间 --><span class="current_time">00:00:00</span>/<span class="total_time">00:00:00</span></div></div><div class="vido_progress"><!-- 控制进度条 --><div class="vido_line"><div class="line_button"></div></div></div><vido class="vido_control_right"><div id="vido_speed">倍速<!-- 倍速 --><div class="speed_box"><div class="speed">2X</div><div class="speed">1.5X</div><div class="speed">1.25X</div><div class="speed">1X</div><div class="speed">0.5X</div></div></div><div id="vido_full"></div><!-- 全屏 --></vido></div></div>

js定义

var figure=document.querySelector(".vido_figure")
var vido=document.getElementById("vido")
var functionbox=document.querySelector(".function_Box")
var play=document.getElementById("play")
var next=document.getElementById("vido_next")
var voice_box=document.querySelector(".voice_content")
var voice=document.getElementById("vido_voice")
var voicenum=document.querySelector(".voice_num")
var voiceall=document.querySelector(".voice_all")
var voicenow=document.querySelector(".voice_now")
var currenttime=document.querySelector(".current_time")
var totaltime=document.querySelector(".total_time")
var progress=document.querySelector(".vido_progress")
var line=document.querySelector(".vido_line")
var speedbox=document.querySelector(".speed_box")
var speed=document.getElementById("vido_speed")
var speeds=document.getElementsByClassName("speed")
var full=document.getElementById("vido_full")

js代码

vido.oncanplay=function(){figure.style.display="none"vidobox.style.display="block"//console.log(vido.duration);//console.log(vido.volume);let obj=formartTime(vido.duration);totaltime.innerHTML=`${obj.hour}:${obj.minute}:${obj.second}`//初始化视频时间voicenum.innerHTML=vido.volume*100//初始化视频音量voicenow.style.height=vido.volume*100+"%"
}
//时间函数导入时间函数输出时，分，秒
function toFullVideo(videoDom) {if (videoDom.requestFullscreen) {return videoDom.requestFullscreen();} else if (videoDom.webkitRequestFullScreen) {return videoDom.webkitRequestFullScreen();} else if (videoDom.mozRequestFullScreen) {return videoDom.mozRequestFullScreen();} else {return videoDom.msRequestFullscreen();}
}

在视频未加载出前或者当你改变进度条时需要加载figure就显示，加载好了再让vido显示

视频音量大小为0到1，初始值为1.

1.开始暂停

let flag=false
play.onclick=function(){if(flag){flag=false;play.id="play"vido.pause()}else{flag=true;play.id="plays"vido.play()//titlebox.style.display="block"//functionbox.style.display="block"}
}
vido.addEventListener("click",function(){if(flag){flag=false;play.id="play"vido.pause()}else{flag=true;play.id="plays"vido.play()}
})

创建flag判断如果现在暂停的话flag为false点击开始播放，播放时flag为true点击暂停

2.全局监听更新进度条和时间

vido.ontimeupdate=function(){let obj=formartTime(vido.currentTime)currenttime.innerHTML=`${obj.hour}:${obj.minute}:${obj.second}`let res=vido.currentTime/vido.duration*100;line.style.width=res+'%';linebutton.style.left = res+"px";console.log(vido.currentTime+"now");
}

3.控制音量大小

voiceall.addEventListener("click",function(long){long=long||window.long;//console.log(long.offsetY,voiceall.offsetHeight);let voice_now=(voiceall.offsetHeight-long.offsetY)/voiceall.offsetHeight;vido.volume=voice_nowvoicenum.innerHTML=Math.round(vido.volume*100)voicenow.style.height=vido.volume*100+"%"
})

声音大小等于总的减去点击的长，再除以总的得到百分比

4.控制倍速

speed.addEventListener("mouseover",function(){speedbox.style.display="block"
})
speedbox.addEventListener("mouseenter",function(){speedbox.style.display="block"
})
speedbox.addEventListener("mouseout",function(){speedbox.style.display="none"
})
speeds[0].onclick=function(){vido.playbackRate=2.0speed.innerHTML="2.0"
}
speeds[1].onclick=function(){vido.playbackRate=1.5speed.innerHTML="1.5"
}
speeds[2].onclick=function(){vido.playbackRate=1.25speed.innerHTML="1.25"
}
speeds[3].onclick=function(){vido.playbackRate=1speed.innerHTML="倍速"
}
speeds[4].onclick=function(){vido.playbackRate=0.5speed.innerHTML="0.5"
}

主要使用playbackRate控制

5.全屏

full.onclick=function(){toFullVideo(vido)
}
//全屏适配器
function toFullVideo(videoDom) {if (videoDom.requestFullscreen) {return videoDom.requestFullscreen();} else if (videoDom.webkitRequestFullScreen) {return videoDom.webkitRequestFullScreen();} else if (videoDom.mozRequestFullScreen) {return videoDom.mozRequestFullScreen();} else {return videoDom.msRequestFullscreen();}
}

6,7改变进度条

点击

progress.addEventListener("click",function(long){long=long||window.long;let currentTime=long.offsetX/progress.offsetWidth*vido.duration;vido.currentTime=currentTime
})

由于前面实时监听的时间，在改变视频时间后，进度条会自动更新

拖拽

linebutton.onmousedown = function(event){event = event || window.event;//获取圆点偏移量var progressLeft = event.clientX - linebutton.offsetLeft;// 为右侧圆点绑定拖动事件document.onmousemove = function(event){event = event || window.event;// 获取鼠标坐标var progressX = event.clientX - progressLeft;if(progressX<=0){// 暂停拖动（如果拖动条超出范围，则停止拖动）progressX = 0;}else if(progressX>=880){progressX = 880;}linebutton.style.left = progressX+"px";// 显示进度条line.style.width = progressX+"px";var res=progressX/880;console.log(res/100);vido.currentTime=res*vido.durationlet obj=formartTime(res*vido.duration)currenttime.innerHTML=`${obj.hour}:${obj.minute}:${obj.second}`// 显示进度条百分比//取消浏览器对拖拽内容进行搜索的默认行为return false;};// 为右侧圆点绑定鼠标抬起事件document.onmouseup = function(event){event = event || window.event;// 取消鼠标移动事件document.onmousemove = null;};};

用js自定义视频播放器相关推荐

HTML5 自定义视频播放器
HTML5 自定义视频播放器第一步:获取播放器第二步:实现播放与暂停第三步:实现全屏操作第四步:实现播放的逻辑第五步:实现播放过程的逻辑第六步:实现视频的跳播第七步:播放完毕后重置播放器 ...
Android进阶：自定义视频播放器开发（下）
上一篇文章我们主要讲了视频播放器开发之前需要准备的一个知识,TextureView,用于对图像流的处理.这篇文章开始构建一个基础的视频播放器. 一.准备工作在之前的文章已经说过了,播放器也是一个vi ...
Android开发笔记（一百二十五）自定义视频播放器
视频播放方式在Android中播放视频的方式有两种: 1.使用MediaPlayer结合SurfaceView进行播放.其中通过SurfaceView显示视频的画面,通过MediaPlayer来设置 ...
一步步自定义视频播放器——TextureView+MediaPlayer自定义视频播放器
本篇参考封装一个视频播放器,原文已经写的非常棒了,本篇加入了个人对其内容的理解.秉承不重复造轮子的良好理念,接下来开始拆解轮子.内容非常多,我都差点放弃写,有耐心的请往下看 github上非常棒的视频 ...
Android自定义视频播放器（三）
参看:Android自定义视频播放器(一):https://blog.csdn.net/zxd1435513775/article/details/81507909 参看:Android自定义视频播放 ...
自定义视频播放器与慢放滚轮
受同学之邀,帮忙自定义一控件.需求是:开发慢放滚轮,用手指拨动实现帧级的慢速播放,滚轮可双向拨动,其滚动具有惯性,滚动速度决定视频播放的速度.需求很明朗,可我却是一头雾水.说实话,在此之前我还没有自定 ...
使用html+js实现视频播放器
使用html+js实现视频播放器新手第一次发CSDN,请多关照今天我来整理一下视频播放器,主要是javaScript部分. 首先是html部分(我这里只贴出关键部分,其他修饰网页的部分在末尾完整实 ...
Android 自定义视频播放器
由于录像之后,原先选用的腾讯VOD点播播放器显示出来竖屏都变横屏了,虽然选中了现在的腾讯VOD点播,还是把Android视频播放器了解了一番. Android自定义视频播放器有以下三种: 一.Medi ...
HTML5视频（自定义视频播放器源码）
video对象兼容情况: safari浏览器不支持webm格式 Chrome浏览器支持webm格式 ie8以及以下不支持video标签 , ie9支持video标签 ,但是支持mp4格式的 Fire ...

用js自定义视频播放器

用js自定义视频播放器相关推荐

最新文章

热门文章