首頁 >web前端 >js教程 >Video.js打造網頁播放器（圖文教學）

Video.js打造網頁播放器（圖文教學）

亚连原創: 2018-05-18 13:59:234008瀏覽

以下是我幫大家整理的Video.js打造網頁播放器，有興趣的同學可以去看看。

1.第一步

<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.第二步

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

3.第三步

<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.第四步

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

這樣就可以播放網路影片了。是不是很方便。

偵測影片是否播放完畢

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

如果是手機使用需要

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

上面是我整理給大家的Video.js打造網頁播放器，希望今後會對大家有幫助。

如何在Javascript中自動將輸入的數字轉換成貨幣格式（程式碼附上）

如何使用vue.js實作價格格式化（程式碼附上）

js原生程式碼實作資料雙向綁定（可以直接拿來使用，已經封裝好了）

以上是Video.js打造網頁播放器（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何在Javascript中自動將輸入的數字轉換成貨幣格式（程式碼附上）下一篇：如何在Javascript中自動將輸入的數字轉換成貨幣格式（程式碼附上）

看更多