西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

texttrack

字幕显示插件源码

该插件中字幕功能依赖xgplayer-subtitle实现，需单独安装

pluginName: texttrack

功能说明:

  1. 显示字幕列表
  2. 加载并解析字幕内容，并显示为dom结构

使用方式

import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import TextTrack from 'xgplayer/es/plugins/track'
import 'xgplayer/es/plugins/track/index.css'

const player = new Player ({
  ...,
  plugins: [..., TextTrack],
  texttrack: {
    list: [{
      id: 'vtt1',
      url: '/example/assets/video/vtt-demo-zh.vtt',
      language: 'zh-cn',
      text: '字幕1',
      default: true
    },
    {
      id: 'vtt2',
      url: '/example/assets/video/vtt-demo-en.vtt',
      language: 'en',
      text: '字幕2',
      default: false
    }]
    ...
  }
})

config

position

插件挂载位置，默认为player.controls.right

index

  • @type: Number
  • default: 6

插件DOM在挂载点内的排序，默认为6，越小越靠前（若index相同，后实例化的插件会被放置在前面）

list

  • @type: Arrays 字幕列表
  • default: []

具体结构如下所示

list = [{
  id: String | Number,  // 用于标识字幕的唯一性
  language: String,     // 语言
  text: String | {[propName: String]: Any},     // 在切换列表中显示的文案
  isDefault:  Boolean,   // 是否为默认字幕，如果字幕列表此项均为false,则取第一条
  url: String // 字幕加载地址
}]

isDefaultOpen

  • @type: Boolean
  • default: false

是否默认开启

style

  • @type: Object, 具体格式如下结构所示
  • default: 如下所示
style: {
  follow: true, // 是否跟随控制栏调整位置
  mode: 'stroke', // 字体显示模式 stroke/bg（文字描边/文字背景），默认为stroke
  followBottom: 50, // 跟随底部控制栏的高度
  fitVideo: true, // 是否跟随视频自动调整字号
  offsetBottom: 2, // 字幕距离画面底部百分比，默认2%
  baseSizeX: 49, // 横屏视频适配基准字号
  baseSizeY: 28, // 竖屏视频适配基准字号
  minSize: 16, // pc端最小字号
  minMobileSize: 13, // 移动端最小字号
  line: 'double', // 最大显示行数 single/double/three
  fontColor: '#fff' // 字体颜色
}

closeText

  • @type: { { text: string, iconText: string } }
  • default: { text: '不开启', iconText: '字幕' }

字幕控件显示文案配置

API

updateSubtitles(list)

  • @desc: 更新字幕列表
  • @param: { Arrays } list 具体数据结构参考config.list

← time →