h5+js如何实现视频播放？本篇文章就给大家通过示例介绍使用h5+js制作视频播放器控件的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。【推荐教程：Html5视频教程】
由于h5兼容性问题，很多浏览器对于插入视频播放的支持都大不相同。火狐支持的比较完整，谷歌则支持的不是很好，很多功能都不能实现，这就需要我们去自制一个播放界面，去兼容不同的浏览器。
只插入一个视频时，浏览器中只会出现这样一个画面。只有单击右键才可以弹出菜单栏显示播放或者显示控件；
下面是一个自制播放控件的小练习，比较粗糙，很多功能有待完善。
制作中可能用到的一些常见属性和内容：
1、标签39000f942b2545a5315c57fa3276f220a6a9c6d3f311dabb528ad355798dc27d
2、常用属性：
autoplay–自动播放；
controls–显示音乐控件；
loop–实现循环播放；
poster–视频加载未开始时播放的图片；
3、video支持多视频格式：（以此解决不同浏览器对视频格式的兼容问题）
<video poster=img/oceans-clip.png>
<source src=video/oceans-clip.mp4></source>
<source src=video/oceans-clip.webm></source>
<source src=video/oceans-clip.ogv></source>
</video>
4、获取当前视频播放的状态：
playbtn(对象).onclick=function(){
if(video.paused){
video.play();
}else{
video.pause();
}
}
5、视频的一些特殊事件：
1）当视频可以播放获取总时间：
vdideo.oncanplay=function(){
console.log(video.duration);
}
2）视频播放时，获取实时时间：
video.ontimedate=function(){
console.log(video.currentTime);
}
3）视频结束：
video.onended=function(){
}
实现后的样式：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>视频</title>
<style type=text/css>
input,body,div{
margin: 0;
padding: 0;
}
input{
display: inline-block;
width: 30px;
height: 30px;
background-size: 30px;
float: left;
}
#control{
width: 620px;
height: 30px;
background-color: #222;
margin-top: -8px;
padding: 5px 10px;
clear: both;
/*position: absolute;
top:300px
left: 100px;*/
}
#jdt{
margin: 10px 5px 0 5px;
width: 400px;
height: 10px;
float: left;
}
span {
display: inline-block;
color: #fff;
float: left;
margin: 6px 5px 0 5px;
font: 14px 微软雅黑;
}
#box1{
margin:50px auto;
width: 615px;
height: 305pc;
/*position: relative;*/
}
#playbnt{
}
</style>
</head>
<body>
<div id=box1>
<video poster=img/oceans-clip.png>
<source src=video/oceans-clip.mp4></source>
<source src=video/oceans-clip.webm></source>
<source src=video/oceans-clip.ogv></source>
</video>
<div id=control>
<input type=image value= id=playbnt src=img/on.png/>
<meter id=jdt min=0 max=100></meter>
<span id=timeone>00:00:00</span>
<span>/</span>
<span id=timeall>00:00:00</span>
<input type=image value= id=fullbnt src=img/expand.jpg/>
</div>
</div>
<script type=text/javascript>
var playbnt=document.getElementById(playbnt);
var fullbnt=document.getElementById(fullbnt);
var video=document.querySelector(video);
var box1=document.getElementById(box1);
//播放按钮
playbnt.onclick=function(){
if(video.paused){
video.play();
playbnt.src=img/pause.png;
}else{
video.pause();
playbnt.src=img/on.png;
}
}
//点击进入全屏（注意兼容）
fullbnt.onclick=function(){
if(document.fullscreenElement||document.webkitFullscreenElement||document.mozCancelFullScreen||document.msFullscreenElement){
if(document.cancelFullscreen){
document.cancelFullscreen();
}else if(document.webkitCancelFullscreen){
document.webkitCancelFullscreen();
}else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}else if(document.msExitFullscreen){
document.msExitFullscreen();
}
}else{
if(video.requestFullscreen){
video.requestFullscreen();
}else if(video.webkitRequestFullscreen){
video.webkitRequestFullscreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.msRequestFullscreen){
video.msRequestFullscreen();
}
}
}
//实时获取时间
var timh=0;
var timm=0;
var tims=0;
var all=null;
var one=null;
var timeone=document.getElementById(timeone);
var jdt=document.getElementById(jdt);
video.ontimeupdate=function(){
var t=Math.floor(video.currentTime);
ont=t;
timh=t/3600;
timm=t%3600/60;
tims=t%60;
// console.log(t);
if(t<10){
timeone.innerHTML=00:00:0+tims;
}else if(10<t<60){
timeone.innerHTML=00:00:+tims;
}else if(60<t<600){
timeone.innerHTML=00:0+timm+:+tims;
}
else if(600<t<3600){
timeone.innerHTML=00:+timm+:+tims;
}else if(3600<t<36000){
timeone.innerHTML=0+timh+:+timm+:+tims;
}else if(t>36000){
timeone.innerHTML=timh+:+timm+:+tims;
}
jdt.value=(t/all)*100;
}
//获取总时间
video.oncanplay=function(){
var t=Math.floor(video.duration);
all=t
timh=t/3600;
timm=t%3600/60;
tims=t%60;
// console.log(t);
if(t<10){
timeall.innerHTML=00:00:0+tims;
}else if(10<t<60){
timeall.innerHTML=00:00:+tims;
}else if(60<t<600){
timeall.innerHTML=00:0+timm+:+tims;
}
else if(600<t<3600){
timeall.innerHTML=00:+timm+:+tims;
}else if(3600<t<36000){
timeall.innerHTML=0+timh+:+timm+:+tims;
}else if(t>36000){
timeall.innerHTML=timh+:+timm+:+tims;
}
}
//视频结束时进度条
video.onended=function(){
playbnt.src=img/on.png;
timeone.innerHTML=00:00:00;
video.currentTime=0;
}
//单击进度条
var jdtl=jdt.offsetLeft;
var jdtw=jdt.offsetWidth;
jdt.onclick=function(event){
// console.log(all);
var onex=Math.floor((event.clientX-jdtl));//点击坐标到进度条左端距离
console.log(鼠标单击坐标:+event.clientX);
// console.log(jdtl);
var allx=Math.floor(jdtw); //进度条的宽度
var x=onex/allx;
console.log(单击坐标-left=+onex);
console.log(进度条宽度=+allx);//百分比
console.log(百分比=+x);
video.currentTime=Math.floor(all*x); //实时时间=总时长*百分比
console.log(实时时间=+all*x);
}
</script>
</body>
</html>
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注双恒网络相关教程栏目！！！
以上就是h5+js如何实现视频播放？简单视频播放器控件的制作的详细内容，更多请关注双恒网络其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » h5+js如何实现视频播放？简单视频播放器控件的制作
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » h5+js如何实现视频播放？简单视频播放器控件的制作
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
