xgplayer-subtitles

外挂字幕组件,目前支持vtt格式的解析

Usage no npm install needed!

<script type="module">
  import xgplayerSubtitles from 'https://cdn.skypack.dev/xgplayer-subtitles';
</script>

README

Introduction

外挂字幕组件,目前支持vtt格式的解析

Start

  1. Install

    $ npm install xgplayer-subtitles
    
  2. Usage

    Step 1:

    <div id="vs"></div>
    

    Step 2:

    import Player from 'xgplayer';
    
    const player = new Player({
        id: 'vs',
        url: ''
    })
    
    const options = {
       player: player, // 可选, 如果初始化的时候已经有播放器实例
       subTitles: [{              //必选 字幕信息
         label: '中文',
         language : '',          //必选
         id: 'cn',               //必选
         isDefault: false,       //必选 是否是默认字幕
         url: './subtitle/cn.vtt' //必选 字幕链接地址
        }, {
          label: '英文',
          url: './subtitle/en.vtt',
          id: 'en',
          isDefault: true,
          language: 'en'
        }],
        defaultOpen: false, // 是否默认开启字幕
        mode: 'bg', //可选 字幕显示模式,支持bg(背景)和 stroke(字体边框填充),默认stroke
        line: 'double' //可选 字幕最大显示行数 默认单行,single, 支持single/double/three,
      }
    const subTitle = new window.XgSubtitle(options)
    // 如果在初始化的时候播放器还没有播放器实例,也可以使用以下挂载播放器
    
    subTitle.attachPlayer(player)
    
    

API

atttchPlayer(player)

挂载播放器实例

detachPlayer(player)

卸载播放器实例

destroy

销毁组件

switch({id:'', language:''})

切换字幕

subtitle.switch({id: 'cn'}).then(() => {
    console.log('切换成功')
}).catch(() => {
    console.log('切换失败')
})

切换信息返回说明

{
    code: 0, // 切换成功
    msg: 'SUCCESS'
},{
    code: 1, // 下载错误
    msg: 'LOAD_ERROR'
}, {
    code: 2, // 解析错误
    msg: 'PARSER_ERROR'
}, {
    code: 3,  // 格式不支持
    msg: 'FORMAT_NOT_SUPPORTED'
},
{
    code: 4, // id或者语言不存在
    msg: 'ID_OR_LANGUAGE_NOT_EXIST'
}, {
    code: 5, // 参数错误
    msg: 'PARAMETERS_ERROR'
}, {
    code: 6, // 操作中断
    msg: 'ABORT'
}, {
    code: 7, // 未知错误
    msg: 'UNKNOWN'
}

openOff()

关闭当前字幕

错误码说明