[HTML5] JWPlayerで字幕を表示する – 端くれプログラマの備忘録

以下に解説あり。

Adding Closed Captions | JW Player
https://support.jwplayer.com/customer/portal/articles/1407438-adding-closed-captions

字幕データはVTT形式で用意する

JWPlayerがサポートする字幕ファイル形式はWebVTTとSRTの2種類。

WebVTT: The Web Video Text Tracks Format
https://w3c.github.io/webvtt/

SubRip – Wikipedia, the free encyclopedia
https://en.wikipedia.org/wiki/SubRip

推奨はVTT形式。理由はHTML5標準で広くブラウザでサポートされていること。iOSのフルスクリーンではVTTであることが必須らしい。書き方はSubRipと大して変わらないので、SubRip形式があればVTT形式に直すことは容易そう。

WEBVTT

00:00:12.000 --> 00:00:15.000
What brings you to the land
of the gatekeepers?

00:00:18.500 --> 00:00:20.500
I'm searching for someone.

00:00:36.500 --> 00:00:39.000
A dangerous quest for a lone hunter.

00:00:41.500 --> 00:00:44.000
I've been alone for as long
as I can remember.

00:00:12.000 --> 00:00:15.000

What brings you to the land

of the gatekeepers?

00:00:18.500 --> 00:00:20.500

I'm searching for someone.

00:00:36.500 --> 00:00:39.000

A dangerous quest for a lone hunter.

00:00:41.500 --> 00:00:44.000

I've been alone for as long

as I can remember.

JWPlayerオプション指定

少しのオプション指定の追加で割と容易にキャプションを追加できる。

var playerInstance = jwplayer("myElement")
playerInstance.setup({
    playlist: [{
        file: "/assets/sintel.mp4",
        image: "/assets/sintel.jpg",
        tracks: [{
            file: "/assets/captions-en.vtt",
            label: "English",
            kind: "captions",
            "default": true
        },{
            file: "/assets/captions-fr.vtt",
            kind: "captions",
            label: "French"
        }]
    }]
});

var playerInstance = jwplayer("myElement")

playerInstance.setup({

playlist: [{

file: "/assets/sintel.mp4",

image: "/assets/sintel.jpg",

tracks: [{

file: "/assets/captions-en.vtt",

label: "English",

kind: "captions",

"default": true

},{

file: "/assets/captions-fr.vtt",

kind: "captions",

label: "French"

}]

});

試してみたらいい感じだった。

字幕データはVTT形式で用意する

JWPlayerオプション指定

関連記事