字幕设置

1. 字幕演示

2. 示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.cn/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.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggtFawR3lNR7hQ2_kore.srt';
            var subtitleURL_japan = 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggtFawR3lNR7hQ2_jpan.srt';
            player1.addSubtitle(subtitleURL_korean, '1');
            player1.addSubtitle(subtitleURL_japan, '2');
        }
    }

    var info = {
        playerElm: 'mse',
        autoplay: false,
        url: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4'
    };

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

</body>
</html>

3. 注意事项

  1. 建议在视频加载完成后再加载字幕,以确保最佳用户体验

  2. 字幕轨道标识('1'、'2')用于区分双字幕显示位置

  3. 字幕操作面板可选择双字幕或者某一单字幕

目录导航