経緯
HTML5にてvideoタグを用いて動画再生を実現することに。
今回はWebVTT使用。WebVTTについては下記の方が分かりやすいと思うので、参照してください。
(字幕)HTML5 video および audio 用の Caption
で、一通り画面を作成した。
前提
・字幕ファイルは二つ。英語と日本語を用意。
・英語の方を初回表示時の字幕として設定する(trackタグにdefalutを設定する)
実装
index.html
<video class="with-caption" controls autoplay muted>
<!-- 動画ファイル -->
<source src="video.mp4" type="video/mp4">
<!-- 字幕ファイル(英語) -->
<track label="English" kind="subtitles" srclang="en" src="sample-en.vtt" type="text/vtt" default>
<!-- 字幕ファイル(日本語) -->
<track label="日本語" kind="subtitles" srclang="ja" src="sample-ja.vtt" type="text/vtt">
</video>
この状態で、様々な端末で確認を行ったのだが…iPad、iPhoneのSafariだけdefalutが有効にならず、初期表示が日本語で再生される事態に。
結論
Safariのみ、Safari設定の「優先言語」から初期の字幕を設定しているっぽい。
優先言語を変更するとその言語の字幕が初期表示される。
※Safari上でdefalutを有効化させる手段についてはまだ不明…
補足
・テンプレート上の右下の「字幕」などの表示もブラウザの言語設定によって変化するようです。