MuiPlayer字幕 -MuiPlayer简约H5播放器

MuiPlayer字幕 -MuiPlayer简约H5播放器


提示

视频字幕使用的是 html5 track 标签，目前只支持使用 webvtt 格式的字幕文件。

你可以配置一个或者多个 vtt 文件，从而可以选择不同的语言。当存在 vtt 字幕时， mui-player-desktop-plugin.js 会默认读取 track 配置添加设置菜单，前提是浏览器支持 webvtt 文档格式。

查看 webvtt supported (opens new window)。从 这里 (opens new window)您可以学习到 webvtt 的知识。

API


#配置示例

在初始化配置字幕传递 subtitle 对象，接收 tracks 以及 styles 配置

1. var mp = new MuiPlayer({
   
2.     container:'#mui-player',
   
3.     src:'../media/media.mp4',
   
4.     ...
   
5.    
   
6.     subtitle{
   
7.         tracks:[
   
8.             {
   
9.                             kind:'subtitles',
   
10.                                 src:'./static/subtitle/sintel-en.vtt',
    
11.                                 label:'英语',
    
12.                                 srclang:'en',
    
13.                                 default:true,
    
14.             },
    
15.             {
    
16.                                 kind:'subtitles',
    
17.                                 src:'./static/subtitle/sintel-de.vtt',
    
18.                                 label:'德语',
    
19.                                 srclang:'de',
    
20.             },
    
21.             {
    
22.                                 kind:'subtitles',
    
23.                                 src:'./static/subtitle/sintel-es.vtt',
    
24.                                 label:'西班牙语',
    
25.                                 srclang:'es',
    
26.             }
    
27.         ],
    
28.         styles:{ // 字幕默认样式
    
29.                         color:'#FFFFFF',
    
30.                         background:'transparent',
    
31.                         textShadow:'0px 0px 1px #000000',
    
32.                 },
    
33.     }});

复制代码