Comment implémenter la lecture vidéo dans h5+js ? Production d'un contrôle simple de lecteur vidéo

Comment h5+js implémente-t-il la lecture vidéo ? Cet article vous donnera un exemple de la façon d'utiliser h5+js pour créer un contrôle de lecteur vidéo. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. [Tutoriel recommandé : Tutoriel vidéo HTML5]

En raison de problèmes de compatibilité h5, de nombreux navigateurs ont une prise en charge très différente pour la lecture vidéo insérée. Le support de Firefox est relativement complet, mais celui de Google n'est pas très bon, et de nombreuses fonctions ne peuvent pas être implémentées. Cela nous oblige à créer une interface de lecture faite maison pour être compatible avec les différents navigateurs.

Lors de l'insertion d'une seule vidéo, seul cet écran apparaîtra dans le navigateur. Seul un clic droit peut faire apparaître la barre de menu pour afficher les commandes de lecture ou d'affichage

Ce qui suit est un petit exercice de commandes de lecture créées par vous-même ; de nombreuses fonctions doivent être améliorées.

Quelques attributs et contenus courants pouvant être utilisés en production :

1. Balise 39000f942b2545a5315c57fa3276f220a6a9c6d3f311dabb528ad355798dc27d

2. Attributs communs :

lecture automatique - lecture automatique ;

 contrôles - affichage des commandes de musique

boucle - mise en œuvre de la lecture en boucle ;

affiche - l'image jouée lorsque le chargement de la vidéo n'a pas démarré ;

3. La vidéo prend en charge plusieurs formats vidéo  : (Cela résout la compatibilité des différents navigateurs avec la vidéo. 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>

4. Obtenez l'état actuel de la lecture vidéo :

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

5. >1) Lorsque la vidéo peut être lue, obtenez la durée totale :

2) Lorsque la vidéo est en cours de lecture, obtenez la durée réelle :

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

3) La vidéo se termine :

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

video.onended=function(){
}

Le style implémenté :

Le code est le suivant :

Ce qui précède est cet article. L'intégralité du contenu, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
        a80eb7cbb6fff8b0ff70bae37074b813
        b2386ffb911b14667cb8f0f91ea547a7视频6e916e0f7d1e588d4f442bf645aedb2f
        46d5fe1c7617e3914f214aaf043f4ccf
            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{
                
            }
        531ac245ce3e4fe3d50054a55f265927
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d
        7fdebad7eb82ec390f2c32e1f12afe1e
            1405df188813e558f0140e3ab6e78ca7
                cd56d94a47a12885cb9dcdb78a969f5e055a816595e1cf5e4b7c6fe05c404a6c
                72869299b9e83661f52f74f1a0f1b4f6055a816595e1cf5e4b7c6fe05c404a6c
                ad0174e7eff5e4ab98b92592db810584055a816595e1cf5e4b7c6fe05c404a6c
            a6a9c6d3f311dabb528ad355798dc27d
            2ea26eabe7a1f178ec3f106f3cb66b31
                1d90c59fbeabcc32747892d80c3dbf5a
                cfa22b4c312e1430b3785d6cb577b89e6fd20bd7b615c56cbd536dc339c52b20
                9159ca2cbab8ec73f3d1b35fd417667200:00:0054bdf357c58b8a65c66d7c19c8e4d114
                45a2772a6b6107b401db3c9b82c049c2/54bdf357c58b8a65c66d7c19c8e4d114
                18cb35418c1c67c9302b6fd0efb4534100:00:0054bdf357c58b8a65c66d7c19c8e4d114
                e99d7a811f1a940a8cdba0f0388de53e
            16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
        8019067d09615e43c7904885b5246f0a
            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(t4bf8e71bbeebea6eb36c87b18c4494ad36000){
                    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(tcb441262531df53df20eaddc4ed7e7da36000){
                    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);
            }
            
        2cacc6d41bbb37262a98f745aa00fbf0
    36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!