How to implement video playback in h5+js? Production of simple video player control-H5 Tutorial-php.cn

How to implement video playback in h5+js? Production of simple video player control

青灯夜游

Release： 2019-01-05 11:18:03

forward

8199 people have browsed it

h5 How to implement video playback in js? This article will give you an example of how to use h5 js to create a video player control. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. [Recommended tutorial: Html5 video tutorial]

Due to h5 compatibility issues, many browsers have very different support for inserted video playback. Firefox's support is relatively complete, but Google's support is not very good, and many functions cannot be implemented. This requires us to create a self-made playback interface to be compatible with different browsers.

When inserting only one video, only such a screen will appear in the browser. Only by right-clicking can the menu bar display playback or display controls pop up;

#The following is a small exercise of self-made playback controls. It is relatively rough and many functions need to be improved.

Some common attributes and content that may be used in production:

1. Tag

2. Common attributes:

autoplay--automatic playback;

controls--display music controls;

loop--implement loop playback;

poster--The picture played when the video loading has not started;

3. Video supports multiple video formats: (This solves the compatibility of different browsers with video formats Question)

<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>

Copy after login

4. Get the current video playback status:

playbtn(对象).onclick=function(){
　　　if(video.paused){
　　　  video.play();　　
　　　}else{
　　　　video.pause();
　　　}
}

Copy after login

5. Some special events of the video:

1) When the video can be played, get the total time:

vdideo.oncanplay=function(){
　　　console.log(video.duration);
}

Copy after login

2) When the video is playing, get the real time:

video.ontimedate=function(){
　　console.log(video.currentTime);
}

Copy after login

3) The video ends:

video.onended=function(){
}

Copy after login

The style after implementation:

The code is as follows:

<!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>

Copy after login

The above is the entire content of this article, I hope it can be helpful to everyone’s learning help. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to implement video playback in h5+js? Production of simple video player control. For more information, please follow other related articles on the PHP Chinese website!