WordPress Snippet

ワードプレスをカスタマイズしよう

WordPress4.8 動画ウィジェット

WordPress4.8で、動画ウィジェットが追加されます。

同時に、アップデートする テキストウィジェットもエディタが追加されたので、ショートコードやOembed等でビデオを再生する事もできるようになりました。

類似した機能のようにも感じましたが、動画ウィジェットは、「字幕を追加できる」という点が大きな違いのようです。

ウィジェットの「動画を編集」ボタンを押すと、「字幕を追加」という項目がサイドバーに表示されます。

この項目をクリックすると、メディアアップロード画面が表示されます。mp4ビデオに字幕を追加してみたいと思います。

テキストファイルを作成します。ファイル名は、test.ja_JP.srt としました。

1
00:00:00,000 --> 00:00:10,000
日本語

2
00:00:11,000 --> 00:00:15,000
日本語テキスト

3
00:00:30,000 --> 00:00:40,000
hello world 3

utf-8でデスクトップなどに保存し、

このファイルを字幕の追加のメディアアップローダーから、アップロードし、追加します

RC1の場合だと、追加の処理が必要そうなので、少し手を加えます。

動画詳細ボタンをクリックして、表示するとスクロールした一番下に、

<track srclang="en" label="English" kind="subtitles" src="http://www.example.com/wp/wp-content/uploads/2017/05/test.ja_JP.srt">

となっているので、以下のように書き換えます。

<track srclang="ja_JP" label="日本語" kind="subtitles" src="http://www.example.com/wp/wp-content/uploads/2017/05/test.ja_JP.srt">

保存すると、字幕が表示されるようになります。この変更を行わないと、ビデオの㏄ボタンを押して言語を選択した場合、englishが二つ並んでしまうためです。

ビデオ編集ソフトなどを使わずに、テキストファイルをアップロードするだけで簡単に字幕が作成できるのは便利ですね。

YouTubeの動画でも、字幕が入れられましたーー

関連

SubRip subtitle text file format – Wikipedia
サポートされる字幕ファイル – YouTube ヘルプ
HTML5 video および audio 用の Caption(字幕) – Qiita
HTML5 Video Caption Maker

[emulsion_relate_posts]