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