videoJs 使用

時間 2019-11-12

標籤 videojs 使用简体版

原文原文鏈接

videoJS 一款視頻播放器，能夠播放多種格式，mp四、m3u八、 webm、ogg等，我主要用它來播放 m3u8格式的視頻 ,

1. 初始化 javascript

videojs("example_video_1", {}, function(){
   　　 //video.js初始化完成後執行
   });

2.video標籤的class中的"video-js" 是videojs全屏和字幕等功能須要的基礎類,vjs-default-skin是vidojs界面默認的皮膚，
vjs-big-play-centered是播放按鈕居中，而默認的是在左上角的。

參數設置

1，autoplay：
   該屬性使video會在頁面加載完畢後當即播放，而IOS設備屏蔽了這個屬性。

2，preload：
   autoplay屬性會屏蔽掉preload屬性，沒有autoplay屬性時，
   當preload值爲auto時，頁面加載時即加載媒體，可是蘋果移動設備會忽略該屬性以保護帶寬
   當preload值爲metadata時，只加載一些關於視頻的元數據信息，如持續時間，媒體尺寸等等。

3，"poster": "./img/tian.gif", 視頻播放以前的圖就像海報相似的

方法：css

1.play() 視頻播放html

2.pause() 視頻暫停java

3.ended() 視頻播放結束web

4.player.currentTime() //player 是播放器 currentTime 是獲取當前的播放時間緩存

5.player.duration() 視頻結束的時候 duration獲取視頻的持續時間也就是視頻總的時間app

6.player.bufferedPercent() 視頻緩存百分比切記是百分比呦
插件機制：

1，聲明插件函數 function Fun(option){}
2，註冊爲一個插件 videojs.plugin('Fun',Fun)
3, 使用插件
動態建立的video在初始化videojs時調用插件，即videojs('id',{plugins:{Fun:option}})
非動態建立的video初始化了的videojs對象能夠直接調用，即videojs.Fun(option)ide

用videoJs 播放視頻的代碼以下函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videoJs</title>
<link rel="stylesheet" type="text/css" href="./js/video-js.css">
    <script src="./js/video.js"></script>
    <script src="./js/videojs-contrib-hls.js"></script>
</head>

<body>
    <section id="videoPlayer">
        <video id="example-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
          <source
             src="./video/134977E9-cn-600k.m3u8"
             type="application/x-mpegURL" id="target">
        </video> 
    </section>

    
<script type="text/javascript">

    var player = videojs('example-video', {"poster": "","controls": "true"}, function(){this.on('play',function(){
            console.log('正在播放');
          }); 

         //暫停--播放完畢後也會暫停
          this.on('pause',function(){
                       console.log("暫停中")
                  }); 

          // 結束
          this.on('ended', function() {
            console.log('結束');
          })
        
    });

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

播放截圖：post

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。