DPlayer icon indicating copy to clipboard operation
DPlayer copied to clipboard

feat(multi subtitles support with auto default subtitle)

Open ngyyuusora opened this issue 4 years ago • 2 comments

multi subttiles with auto default subtitle

multi subtitles

Usage

Init multi subtitles functions need subtitle.url is an array, otherwise only use old single subtitle function. Close subtitle option will be automatically injected. 需要传入subtitle.url为数组方可启用多字幕功能,否则完全使用旧版单个字幕的行为。关闭字幕选项将被自动添加。

subtitle: {
            url: [
                {
                    subtitle: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt',
                    lang: 'zh-cn',
                    name: '光',
                },
                {
                    subtitle: 'https://gist.githubusercontent.com/samdutton/ca37f3adaf4e23679957b8083e061177/raw/e19399fbccbc069a2af4266e5120ae6bad62699a/sample.vtt',
                    lang: 'en-us',
                    name: 'github',
                },
            ],
            defaultSubtitle: 7,
            type: 'webvtt',
            fontSize: '25px',
            bottom: '10%',
            color: '#b7daff'
        },

subtitle.url array should include few subtitle object. subtitle.url数组应包含多个字幕对象。

{
                    subtitle: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt',
                    lang: 'zh-cn',
                    name: '光',
}

subtitle key is subtitle file's uri. lang key should be an lower-upper case lang code(have add translation to i18n for translate lang code). name is a string that display on user's UI. subtitle幕键为字幕文件的地址。lang键应为小写格式的语言代码(对i18n添加了语言代码翻译)。name键为字符串,将在用户界面上显示。

At least should have lang either name key to display properly. 至少应有一个lang键或者name键为正确显示。

Perform

{
                    subtitle: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt',
                    name: '光',
},
{
                    subtitle: 'https://gist.githubusercontent.com/samdutton/ca37f3adaf4e23679957b8083e061177/raw/e19399fbccbc069a2af4266e5120ae6bad62699a/sample.vtt',
                    lang: 'en-us',
}

When only have lang either name key, will directly display (lang will be translated). 当只有lang键或name键时,将直接显示(lang键将会被翻译)。 image image

{
                    subtitle: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt',
                    lang: 'zh-cn',
                    name: '光',
},
{
                    subtitle: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt',
                    lang: 'en-us,
                    name: 'test',
}

When both lang and name key, will show a compaltion. 当lang键和name键都存在时,将会进行组合显示。 image image

Description

For compatibility, not edit on old subtitle button and function, used a new art label. According to subtitle.url's type to display. Subtitles option's items will each subtitle.url, item display use complationm from subtitle object key. 为了兼容性,不修改原来单一字幕按钮,使用了新的art模板标签,根据subtitle.url的类型if显示。字幕选项会循环传入的subtitle.url,选项文字根据传入字幕对象的键组合。

In video art temp, add class to (subtitle)track label for selector to updated subtitle's src. And according to subtitle.url's type to use src. 在video模板中,为selector选择字幕轨道的src添加了class标签。并根据subtitle.url的类型决定使用何变量。

In css, use fit-content for subtitles panel. 在css中,使用fit-content属性动态适应选项宽度。

In subtitles func, will clear current cue(on screen), then updated trakc src. 在subtitles方法中,切换字幕会清除当前显示的cue(否则当未到新字幕的cue时间时,旧字幕会一直显示),然后更新track的src。

Close subtitle use clear trakc src instead of css hide. 关闭字幕使用清除track轨道的src,没有使用css隐藏。

defaultSubtitle feature

Usage

subtitle.defaultSubtitle should be a string or int. subtitle.defaultSubtitle应为字符串或整数类型。

When is a string, will match each subtile object lang then name. When assign 'Off', will default close subtitle. 当为字符串时,会遍历匹配每个subtitle对象的lang然后name。当指定'Off'时,将会默认关闭字幕。

When is a int, will directly use for subttile index in subtitle.url array. When assign last index + 1, will default close subttile. 当为整数时,会直接作为subtitle.url数组中的字幕index使用。当指定为原始数组中最后一个index+1时,将会默认关闭字幕。

When above not match, will try to use this.options.lang to match again. 当以上不匹配时,将尝试使用播放器配置的语言重新匹配。

When not match again(last), will default close subtitle. 当再次不匹配时(最后),将会默认关闭字幕。

ngyyuusora avatar Jan 13 '22 02:01 ngyyuusora

不太清楚该项目是否保留兼容ie, 判断array类型使用了Array.isArray,如果需要兼容ie可能需要改为使用prototype.name === [object array]或者prototype.toString.call

ngyyuusora avatar Jan 13 '22 02:01 ngyyuusora

不太清楚该项目是否保留兼容ie, 判断array类型使用了Array.isArray,如果需要兼容ie可能需要改为使用prototype.name === [object array]或者prototype.toString.call

然后想起来ie的话findindex也没有,,,只能用传统循环自己实现了,,,唉

ngyyuusora avatar Jan 13 '22 03:01 ngyyuusora