recherche

Maison >interface Web >js tutoriel >Créer un lecteur web avec Video.js (tutoriel graphique)

Créer un lecteur web avec Video.js (tutoriel graphique)

亚连
亚连original
2018-05-18 13:59:234018parcourir

Ce qui suit est le lecteur Web Video.js que j'ai compilé pour vous. Les étudiants intéressés peuvent le consulter.

1. La première étape

<link href="video-js.css" rel="stylesheet" type="text/css">  
 <!-- video.js must be in the <head> for older IEs to work. -->  
 <script src="video.js"></script>

2. La deuxième étape

<script>  
   videojs.options.flash.swf = "video-js.swf";  
 </script>

3. >

4. Étape 4
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="480" data-setup="{}">      
   <source src="wangdeshun.mp4" type="video/mp4"/>      
   <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that 
   <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
   </p>      
 </video>

De cette façon, vous pouvez lire des vidéos en ligne. N'est-ce pas très pratique ? 
<script>  
    var player = videojs("example_video_1");  
    // 检测播放时间  
    player.on(&#39;timeupdate&#39;, function () {    
        console.log(&#39;当前播放时间：&#39; = player.currentTime());  
    }  
    });  
    // 开始或恢复播放  
    player.on(&#39;play&#39;, function() {    
        console.log(&#39;开始/恢复播放&#39;);  
    });  
    // 暂停播放  
    player.on(&#39;pause&#39;, function() {    
        console.log(&#39;暂停播放&#39;);  
    });  
/在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">   
    setTimeout(function(){  
        player.pause();  
    },10000);  
 </script>

Vérifiez si la lecture de la vidéo est terminée

Si vous en avez besoin pour une utilisation mobile
player.on(&#39;timeupdate&#39;, function () {    
    // 如果 currentTime() === duration()，则视频已播放完毕  
    if (player.duration() != 0 && player.currentTime() === player.duration()) {  
            // 播放结束  
        }  
    });

Ce qui précède est le lecteur Web Video.js pour lequel j'ai compilé tout le monde. J’espère que cela sera utile à tout le monde à l’avenir. 
在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Articles connexes :

Comment convertir automatiquement les nombres saisis au format monétaire en Javascript (code ci-joint)


Comment utilisez vue.js pour implémenter le formatage des prix (code ci-joint)


code natif js pour implémenter la liaison de données bidirectionnelle (peut être utilisé directement, déjà encapsulé)

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment convertir automatiquement les nombres saisis au format monétaire en Javascript (code ci-joint)Article suivant：Comment convertir automatiquement les nombres saisis au format monétaire en Javascript (code ci-joint)

Articles Liés

Voir plus