HTML5 視頻流行插件之video.js

本文轉載自查看原文 2020-03-05 21:10 58347 html / html5 / h5

Video.js 是一個通用的在網頁上嵌入視頻播放器的 JS 庫，Video.js 自動檢測瀏覽器對 HTML5 的支持情況，如果不支持 HTML5 則自動使用 Flash 播放器。

（要支持ie低版本請下載5.4.3版）點擊進入官網

下載地址：http://www.jq22.com/jquery-info404

也可以使用cdn

<link href="//cdn.bootcss.com/video.js/7.0.0-alpha.1/alt/video-js-cdn.css" rel="stylesheet">
<script src="//cdn.bootcss.com/video.js/7.0.0-alpha.1/video.min.js"></script>

首先給video標簽加上 video-js 的類

data-setup="{ }" 使控件樣式發生改變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js" controls data-setup="{}" width="960" height="400">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
</body>
</html>

vjs-big-play-centered 類，控制按鈕居中顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js vjs-big-play-centered" controls data-setup="{}" width="960" height="400">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
</body>
</html>

preload="auto" 預加載

線上觀看時比較直觀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js vjs-big-play-centered" controls data-setup="{}" width="960" height="400" preload="auto">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
</body>
</html>

poster=" " 設置封面圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
</body>
</html>

videojs是封裝好的方法

.ready 表示視頻已就緒，類似於 canplay（其實完全不如canplay，下面案例有體現）

.currentTime() 當前時間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");
        myvideo.ready(function(){
            console.log("已就緒");
        });

        //綁定在window上，點擊可獲取當前時間進度
        onclick=function(){
            console.log(myvideo.currentTime());
        }
    </script>
</body>
</html>

（報錯是因為之前有語法錯誤，已修正。這里貼的代碼都是木有問題的）

current(time) 設置當前播放時間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        //100秒處開始播放
        myvideo.currentTime(100);

        myvideo.ready(function(){
            console.log("已就緒");
        });

        //綁定在window上，點擊可獲取當前時間進度
        onclick=function(){
            console.log(myvideo.currentTime());
        }
    </script>
</body>
</html>

.duration() 獲取視頻總時長

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        //100秒處開始播放
        myvideo.currentTime(100);

        myvideo.ready(function(){
            //在ready中顯示NaN
            console.log(this.duration());
        });

        //綁定在window上
        onclick=function(){
            console.log(myvideo.duration());
        }
    </script>
</body>
</html>

在這里可以看出 ready不如canplay

因為canplay中已經可以獲取到總時長，而ready中還是NaN，有點辣雞啊

buffered() 視頻已經緩沖了多少

不在本地測試比較明顯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        //100秒處開始播放
        myvideo.currentTime(100);

        myvideo.ready(function(){
            //緩沖
            console.log(this.buffered());
        });

        //綁定在window上
        onclick=function(){
            console.log(myvideo.duration());
        }
    </script>
</body>
</html>

volume() 獲取和設置聲音

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        //獲取聲音
        console.log(myvideo.volume());

        //設置聲音
        myvideo.volume(.5);

        console.log(myvideo.volume());

    </script>
</body>
</html>

width() height() 獲取和設置視頻的寬高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        //獲取寬高
        console.log(myvideo.width());
        console.log(myvideo.height());

        myvideo.width(300);
        myvideo.height(200);

        console.log(myvideo.width());
        console.log(myvideo.height());

    </script>
</body>
</html>

如何查看更多方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        console.log(myvideo);



    </script>
</body>
</html>

事件監聽 on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        myvideo.on("ended",function(){
            console.log("視頻播放結束");
        })

        myvideo.on("pause",function(){
            console.log("點擊暫停");
        })

        myvideo.on("play",function(){
            console.log("點擊播放");
        })

        myvideo.on("volumechange",function(){
            console.log("聲音改變");
        })

        myvideo.on("timeupdate",function(){
            console.log("視頻播放中");
        })

        myvideo.on("seeked",function(){
            console.log("視頻跳轉結束");
        })

        myvideo.on("seeking",function(){
            console.log("視頻跳轉中");
        })



    </script>
</body>
</html>

差不多跟原生video是一樣一樣的

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5視頻播放插件 video.js介紹 HTML5視頻播放插件Video.js使用詳解 video.js視頻播放插件 video.js分段自動加載視頻【html5視頻播放器】播放視頻插件swfobject.js與Video Html5 視頻播放插件Video.js簡單使用使用video.js 7在html中播放rtmp視頻流 [HTML5和Flash視頻播放器]Video.js 學習筆記(一 ) HLS庫:videojs-contrib-hls 【vue】使用 Video.js 播放視頻 Jquery視頻播放插件video.js & Vue中使用Videojs播放插件