當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

Video.js打造网页播放器（图文教程）

發布時間：2023/12/15 综合教程 22 生活家

生活随笔收集整理的這篇文章主要介紹了 Video.js打造网页播放器（图文教程）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

下面是我給大家整理的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('timeupdate', function () {    
        console.log('當前播放時間：' = player.currentTime());  
    }  
    });  
    // 開始或恢復播放  
    player.on('play', function() {    
        console.log('開始/恢復播放');  
    });  
    // 暫停播放  
    player.on('pause', function() {    
        console.log('暫停播放');  
    });  
/在 <head> 中聲明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">   
    setTimeout(function(){  
        player.pause();  
    },10000);  
 </script>

登錄后復制

這樣就可以播放網絡視頻了。是不是很方便。

檢測視頻是否播放完畢


player.on('timeupdate', 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打造網頁播放器（圖文教程）的詳細內容，更多請關注風君子博客其它相關文章！

總結

以上是生活随笔為你收集整理的Video.js打造网页播放器（图文教程）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。