字幕演示

1. 字幕演示

2. 示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js"></script>
</head>
<body>
<div id="mse" style="width: 800px; height: 450px;  margin: 0 auto;"></div>
<script type="text/javascript">
    function onLoadSubtitle() {
        if (player1) {
            var subtitleURL_korean = 'https://cdn.zwplayer.com/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggtFawR3lNR7hQ2_kore.srt';
            var subtitleURL_japan = 'https://cdn.zwplayer.com/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggtFawR3lNR7hQ2_jpan.srt';
            player1.addSubtitle(subtitleURL_korean, '1');
            player1.addSubtitle(subtitleURL_japan, '2');
        }
    }

    var info = {
        playerElm: 'mse',
        autoplay: false,
        fluid: true,
        ratio: "16:9",
        url: 'https://cdn.zwplayer.com/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4'
    };

    var player1 = new ZWPlayer(info);
    //延时加载
    setTimeout(onLoadSubtitle, 200);
</script>

</body>
</html>

3. 字幕功能导览

除上方的双语字幕切换外，当前 Demo 页面的 CC 字幕菜单还提供以下功能，可直接操作体验：

功能	入口	说明
字幕搜索	CC 菜单 → 字幕搜索	输入关键词实时过滤字幕条目，单击跳转、双击播放
字幕设置	CC 菜单 → 字幕设置	调整主/副字幕的字号、颜色、勾边、位置、背景透明度等样式
字幕循环	搜索面板结果右侧循环按钮	按字幕条目的时间区间循环播放
添加字幕文件	CC 菜单 → 添加字幕文件	从本地选择 `.srt`、`.vtt`、`.bcc`、`.json` 文件动态加载
字幕翻译	CC 菜单 → 字幕翻译	选择目标语言，翻译当前字幕并叠加显示（需配置翻译服务）

更详细的功能说明请参阅字幕使用指南。

4. 注意事项

建议在视频加载完成后再加载字幕，以确保最佳用户体验
字幕轨道标识（‘1’、‘2’）用于区分双字幕显示位置
字幕操作面板可选择双字幕或者某一单字幕