suchen

Heim  >  Artikel  >  Web-Frontend  >  Erstellen Sie einen Webplayer mit Video.js (grafisches Tutorial)

Erstellen Sie einen Webplayer mit Video.js (grafisches Tutorial)

亚连
亚连Original
2018-05-18 13:59:233986Durchsuche

Das Folgende ist der Video.js-Webplayer, den ich für Sie zusammengestellt habe. Interessierte Studenten können ihn ausprobieren.

Der erste Schritt

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

Der zweite Schritt

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

Der dritte Schritt

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

4. Schritt 4

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

Auf diese Weise können Sie Online-Videos abspielen. Ist das nicht sehr praktisch?

Überprüfen Sie, ob das Video abgespielt wurde 

player.on(&#39;timeupdate&#39;, function () {    
    // 如果 currentTime() === duration()，则视频已播放完毕  
    if (player.duration() != 0 && player.currentTime() === player.duration()) {  
            // 播放结束  
        }  
    });

Wenn Sie es für die mobile Nutzung benötigen

在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Das Obige ist der Video.js-Webplayer, den ich hoffentlich für alle zusammengestellt habe Es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So konvertieren Sie eingegebene Zahlen automatisch in das Währungsformat in Javascript (Code im Anhang)

So geht's Verwenden Sie vue.js, um die Preisformatierung zu implementieren (Code angehängt)

js nativer Code, um die bidirektionale Datenbindung zu implementieren (kann direkt verwendet werden, bereits gekapselt)

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Webplayer mit Video.js (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So konvertieren Sie eingegebene Zahlen automatisch in Javascript in das Währungsformat (Code beigefügt)Nächster Artikel：So konvertieren Sie eingegebene Zahlen automatisch in Javascript in das Währungsformat (Code beigefügt)

In Verbindung stehende Artikel

Mehr sehen