0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【HTML5】tarckタグのdefalutがSafariだと有効にならない件

Posted at

経緯

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を有効化させる手段についてはまだ不明…

補足

・テンプレート上の右下の「字幕」などの表示もブラウザの言語設定によって変化するようです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?