viu-player

online demo

Table of Contents

• Installation
• Usage
  • <script> Tag
  • Browserify/CommonJS
  • RequireJS/AMD
  • 字幕面板
  • 下一集播放器事件
  • 双字幕开关通事件
  • 获取进条度是否可以快进快退
  • 主动触发信息按键
  • 语言选择格式
  • css格式状态
  • 加载超时机制
  • info 传入字段
  • advance 高级配置 传入字段
• License

Installation

npm install --save viu-player

Usage

To include viu-player on your website or web application, use any of the following methods.

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/viu-player.min.js"></script>
<script>
  var player = videojs("my-video");

  player.ViuPlayer();
</script>

Browserify/CommonJS

When using with Browserify, install viu-player via npm and require the plugin as you would any other module.

var videojs = require("video.js");

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require("viu-player");

var player = videojs("my-video");

player.ViuPlayer();

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(["video.js", "viu-player"], function(videojs) {
  var player = videojs("my-video");

  player.ViuPlayer();
});

字幕面板

player.on("subtitleChange", function(event,langId) {
  //data :string etc: 1,2,3 langId
});
player.on("subtitleClick", function(event,langData) {
  //data :string langData
});

player.ViuPlayer().loadNewLangListOptions(langData);

下一集播放器事件

 //主动方法
player.ViuPlayer()toggleNextChip();

player.on("nextChip", function() {
  //
});

双字幕开关通事件

   //隐藏方法
   player.ViuPlayer().hideTopSubtitle();   
   // 打开方法
   player.ViuPlayer().showTopSubtitle();
   player.on("toggleTopSubtitle", function(event, switcher) {
      console.log("收到双字幕开关", switcher);
  })

获取进条度是否可以快进快退

   player.ViuPlayer().checkVideoProcessed();

主动触发信息按键

   player.ViuPlayer().toggleInfo();

语言选择格式

languages: [
    {
      id: 'CN',
      name: '简体中文',
      isDefault: 0
    },
    {
      id: 'EN',
      name: 'ENGLISH',
      isDefault: 1
    },
    {
      id: 'JP',
      name: '日文',
      isDefault: 0
    }
  ],

css格式状态

.lang-active{
  // 语言选择状态
}
.status-active{
 // 六图标状态
}

加载超时机制

   examplePlayer.on("loadTimeout", function() {
      console.log("loading超60秒");
    });

  options.videoBufferTimeout  // 定义网络慢超时时间

info 传入字段

    info: {
    chipName: '',
    episode: '',
    chipCaptions: '',
    chipDesc: '',
    chipTotal: 0,
    isMovie: 0,
    chipActiveTotal: 0,
    userLevel: '',
    pUrl: '',
    showPremium: true,
  }

advance 高级配置 传入字段

  advance: {
    resolutionList: ['s1080p', 's720p', 's480p', 's240p'],
    defaultResolution: 's720p',
    cdnList: ['url', 'url2', 'url3'],
    defaultCdn: 'url2'
  }

   examplePlayer.on("viuAdvance", function(event,data) {
      console.log("viuAdvance",data);  
      // ex: selectId: s1080p
    });

   examplePlayer.on("weakNetwork", function(event,data) {
     // 网络提示
      //
    });

License

MIT. Copyright (c) gemer cheung <gemercheung@gmail.com>