Wie implementiert man die Videowiedergabe in h5+js? Produktion einer einfachen Videoplayer-Steuerung-H5-Tutorial-php.cn

Wie implementiert man die Videowiedergabe in h5+js? Produktion einer einfachen Videoplayer-Steuerung

青灯夜游

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

nach vorne

8204 Leute haben es durchsucht

Wie implementiert h5+js die Videowiedergabe? Dieser Artikel gibt Ihnen ein Beispiel für die Verwendung von h5+js zum Erstellen einer Videoplayer-Steuerung. Ich hoffe, dass er Ihnen als Referenz dienen wird. [Empfohlenes Tutorial: Html5-Video-Tutorial]

Aufgrund von H5-Kompatibilitätsproblemen unterstützen viele Browser die Wiedergabe eingefügter Videos sehr unterschiedlich. Die Unterstützung von Firefox ist relativ vollständig, die Unterstützung von Google ist jedoch nicht sehr gut und viele Funktionen können nicht implementiert werden. Dies erfordert, dass wir eine selbst erstellte Wiedergabeoberfläche erstellen, um mit verschiedenen Browsern kompatibel zu sein.

Wenn Sie nur ein Video einfügen, wird nur dieser Bildschirm im Browser angezeigt. Nur durch Klicken mit der rechten Maustaste kann die Menüleiste angezeigt werden, um die Wiedergabe oder Steuerelemente anzuzeigen.

Das Folgende ist eine kleine Übung selbst erstellter Wiedergabesteuerelemente Viele Funktionen müssen verbessert werden.

Einige allgemeine Attribute und Inhalte, die in der Produktion verwendet werden können:

1. Markieren Sie

2. Gemeinsame Attribute:

Autoplay – automatische Wiedergabe

Steuerung – Musiksteuerung anzeigen

Loop – Schleifenwiedergabe implementieren;

Poster – das Bild wird abgespielt, wenn das Laden des Videos noch nicht begonnen hat.

3. Video unterstützt mehrere Videoformate : (Dadurch wird die Kompatibilität verschiedener Browser mit Video behoben Formate Frage)

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

Nach dem Login kopieren

4. Holen Sie sich den aktuellen Videowiedergabestatus:

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

Nach dem Login kopieren

5. Einige besondere Ereignisse des Videos:

1) Wenn das Video abgespielt werden kann, erhalten Sie die Gesamtzeit:

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

Nach dem Login kopieren

2) Wenn das Video abgespielt wird, erhalten Sie die Echtzeit:

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

Nach dem Login kopieren

3) Das Video endet:

video.onended=function(){
}

Nach dem Login kopieren

Der implementierte Stil:

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Das Obige ist das Ganze Ich hoffe, dass der Inhalt dieses Artikels allen beim Lernen helfen kann. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie implementiert man die Videowiedergabe in h5+js? Produktion einer einfachen Videoplayer-Steuerung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!