Subtitle Demo

1. Subtitle Demo

2. Example Code

<!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);
    //Delayed loading
    setTimeout(onLoadSubtitle, 200);
</script>

</body>
</html>

3. Subtitle Feature Guide

In addition to the bilingual subtitle switching above, the CC Subtitle menu on the current Demo page also provides the following features for direct interaction:

Feature	Entry Point	Description
Subtitle Search	CC Menu → Subtitle Search	Enter keywords to filter subtitle entries in real-time; click to jump, double-click to play
Subtitle Settings	CC Menu → Subtitle Settings	Adjust styles for primary/secondary subtitles, such as font size, color, stroke, position, background opacity, etc.
Subtitle Loop	Loop button on the right of search panel results	Loop playback based on the subtitle entry’s time interval
Add Subtitle File	CC Menu → Add Subtitle File	Select local `.srt`, `.vtt`, `.bcc`, `.json` files for dynamic loading
Subtitle Translation	CC Menu → Subtitle Translation	Select a target language to translate the current subtitle and display it as an overlay (translation service configuration required)

For more detailed feature descriptions, please refer to the Subtitle User Guide.

4. Notes

It is recommended to load subtitles after the video has finished loading to ensure the best user experience
Subtitle track identifiers (‘1’, ‘2’) are used to distinguish the display positions for dual subtitles
The subtitle control panel allows you to select dual subtitles or a single subtitle