登录  /  注册
首页 > web前端 > H5教程 > 正文

h5+js如何实现视频播放?简单视频播放器控件的制作

青灯夜游
发布: 2019-01-05 11:18:03
转载
7754人浏览过

h5+js如何实现视频播放?本篇文章就给大家通过示例介绍使用h5+js制作视频播放器控件的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。【推荐教程:html5视频教程

由于h5兼容性问题,很多浏览器对于插入视频播放的支持都大不相同。火狐支持的比较完整,谷歌则支持的不是很好,很多功能都不能实现,这就需要我们去自制一个播放界面,去兼容不同的浏览器。

只插入一个视频时,浏览器中只会出现这样一个画面。只有单击右键才可以弹出菜单栏显示播放或者显示控件;

下面是一个自制播放控件的小练习,比较粗糙,很多功能有待完善。

制作中可能用到的一些常见属性和内容:

1、标签

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>
登录后复制

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!

以上就是h5+js如何实现视频播放?简单视频播放器控件的制作的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号