23.1.23更新：「４ Dropbox Googleドライブの動画を、WordPressへ埋め込むのは、実用的か？」を追加しました。さらに、24.1.22の記事へ続く。
＜自宅サーバー発信の字幕付き動画サンプル＞
字幕情報を全行表示します。
〜水槽の周辺を整えました〜
(1)線がゴチャゴチャしてますが、水溢れ対策として、しっかりたるみを作っています。
(2)壁にコンセントとタイマーを吊るしています。
(3)水溢れ対策として、コンセントの上に、プラダンで屋根を作りました。
(4)台車です。色々、ゴチャゴチャ積んでいますが。。
(5)病院や高齢者施設に必ずありそう。ホームセンターでも目にしますよね。
(6)この台車を、この隙間に格納します。
(7)スッキリと納まります。
E(8)玄関側から見ると、裏側は殆ど見えません。
こんなことを感じたことはないでしょうか。今私は、文章だけでは説明しにくい動作などを映像で具体的に伝えたい。「手をこう通して、こう結んで、ここへテープを貼ります。」このことを簡潔に動画にして貼り付けたい。やりたいことは、そんなちっぽけな、断片なのに、YouTubeなどという大風呂敷を広げるようなものしか方法はないのか。手軽な配信方法はないだろうか。
Vimeoはその解決策の一つです。しかしもっと簡単な安価な方法はないだろうか。
このブログで、上の動画は、117秒（約2分)、フレームサイズ480×270、24MBと非常に小さいmp4ファイルでして、自宅サーバーから配信しています。確かに、YouTubeやVimeoと比べると画質は落ちます。しかし、この程度の情報ならこれで十分でしょう。最近、ブログの次はVlogだ、などと流行っているようですが、要は、様々なメディアを混在させてブログをより役立つようにさせる、ということかと思います。
YouTubeやVimeoを利用するための方法は巷に溢れていますので、今回は、それ以外の方法として、その一つ、「WordPressを利用した動画配信」を説明します。但し、一捻り入れることによって、慣れ親しんでいるパソコン作業のまま、即ちフォルダ内のファイルを手直しする作業、それをするだけで、わざわざアップロードすることなく、手直しされる。その仕組みを作成しようと思います。
次に具体的な作業のポイントを説明します。
ポイント解説
１ WordPress純正の動画モジュールは使わない。HTML記述で済ませる。
動画や字幕の手直しをスムーズに行えるようにするため、WordPress純正の動画モジュールは使わないで、HTML5のvideoタグを使います。そうすると、Finderから動画関係ファイルを直接更新するだけで手直しが済みます（後述）。
HTML記述は以下です。
WordPressの挿入ツールから「カスタムHTML」を選び、以下をコピー＆ペーストします。
<figure class="wp-block-video aligncenter">
<video controls="" muted="" poster="https://aaaaaa/poster_video_test.png" src="https://aaaaaa/video_test.mp4" playsinline=""><track default="" src="https://bbbbbb/test.vtt" label="日本語" srclang="ja" kind="subtitles"></video>
<figcaption>＜字幕が表示されない場合は、ここをON↑＞</figcaption></figure>
なお、「aaaaaa」の部分は、自宅サーバーなどの、データが格納されているサーバーディレクトリです。「但し、「bbbbbb」の「test.vtt」は、一部のブラウザで字幕を表示できない不具合が起こりました。試行錯誤の結果、vttファイルの置き場所は、このWordPressをインストールしてあるサーバーと同じWordPressフォルダ内の「uploads」フォルダであればOKです。
「default=””」を挿入すると、デフォルトで字幕が表示されます。削除すると字幕は手動でオンする必要があります。
「muted=””」を挿入すると、デフォルトで消音になります。「playsinline=””」を削除すると、インライン再生されなくなります。
「loop=””」を挿入すると、デフォルトで繰り返しになります。但し、自動的にスタートはしません。
「autoplay=””」を挿入すると、デフォルトで自動的にスタートします。
２ 字幕用のvttファイルを単独に差し込んで使えるおかげで、更新が非常にラク。
どういうことかと言いますと、動画に文字を書き込む場合、「文字を焼き付ける」という方法が一般です。つまり、絵画の上から絵の具の付いた筆で文字を書き加える、つまり文字は絵画の造形の一部として埋め込まれる、このような手法ですね。この手法は、手間が掛かります。漢字の間違いを直したい（私はよくあります。）、文章表現を変更したい、それだけだとしても文字を直した後の加工時間が非常に長く掛かります。ところが、字幕用ファイルを使うと、vttファイルを使うと、vttファイルをテキストエディタで修正して保存しただけで、即、反映します(クローズドキャプション[CC])。
動画を流しながら、vttファイルに、字幕を入れたい時刻を打ち込む、字幕を打ち込む、そうした作業でvttファイルを作ることが出来ます。短い動画ならそれがラクかも知れません。時刻を、場面に合わせて打ち込んでくれるアプリもありますので、それを利用するのが便利かもしれません。
私は字幕工房というアプリを使っています。このアプリの残念な点はsrtファイルで生成されるので、srt→vttへ変換が必要になる点です。
ともかく、vttファイルの記述は以下です。
WEBVTTの後に、必ず２行、改行します。
なお、vttファイルは、シンプルな記述しか出来ません。但し、
<b> </b>で囲んだ文字は太字
<i></i>で囲んだ場合は、イタリック
<u></u>で囲んだ場合は、下線
になります。
WEBVTT
/* スタイルブロックは空白行も "ハイフンハイフン大なり" も使用できません。text-align: startにしても効果がありません。各時刻の後に、英字1スペースをあけてalign:left を入れると左寄せされます。*/
NOTE コメントブロックはスタイルブロックの間で使用できます。
STYLE
::cue(b) {
color: yellow;
}
STYLE
::cue(i) {
color: yellow;
}
STYLE
::cue(u) {
color: yellow;
}
00:00:00.000
00:00:00.971 --> 00:00:08.552
<b> 〜〜水槽の周辺を整えました〜〜 </b>
00:00:08.652 --> 00:00:17.628 align:left
(1)線がゴチャゴチャですが、<b>水溢れ対策として、</b>しっかりたるみを作っています。
00:00:23.690 --> 00:00:38.097
(2)壁にコンセントとタイマーを吊るしています。
00:00:39.745 --> 00:00:50.414
(3)水溢れ対策として、コンセントの上に、
プラダンで屋根を作りました。
00:01:02.528 --> 00:01:10.871
(4)台車です。色々、ゴチャゴチャ積んでいますが。。
00:01:10.971 --> 00:01:17.838
(5)病院や高齢者施設に必ずありそう。<i>ホームセンター</i>でも目にしますよね。
00:01:17.938 --> 00:01:28.278
(6)この台車を、この隙間に格納します。
00:01:28.378 --> 00:01:38.313
(7)スッキリと納まります。
00:01:45.892 --> 00:01:57.767
E(8)玄関側から見ると、<u>裏側</u>は殆ど見えません。
00:01:58.767
３ Finder、FTPから直接手直し
上の動画は、上記１で説明のように、mp4(動画用)、png(サムネイル用)、vtt(字幕用)の3つのファイルで作られています。mp4とpngは、Finderから自宅サーバーを呼び出して、直接修正や上書きが出来ます。但し、vttですが、下の横顔ダックの下の部分ですが、これは外部レンタルサーバー(私はXserverを使っています)をFTPで呼び出しています。このFTPアプリはCyberduckです。ここで直接修正や上書きが出来ます。FTPとFinderの使い勝手はよく似ているので簡単です。
以上です。
４ Dropbox Googleドライブの動画を、WordPressへ埋め込むのは、実用的か？
<Dropboxにある動画再生のテスト〜Dropboxなら字幕ファイルが同期出来る。↓＞
Dropboxには既に動画他のメディアファイルは格納してあるので、面倒なスクリプトのWordPressへの貼り付けを簡単に行えるクイックアクションを作成して、別に投稿するようにします。
これによって、自宅Webサーバーは廃止するか、別の使い方を検討することになると思います。
Dropboxからのリンクコード：
https://www.dropbox.com/scl/fi/9wl7c8vruwkl31271bion/video_test.mp4?rlkey=hghof491n51bhz6kbq1jyepc0&dl=0
<1> これの「dl=0」を「raw=1」で置き換える。
<2>
結果、以下の記述となる。
<figure class="wp-block-video aligncenter">
<video controls
poster="https://www.dropbox.com/scl/fi/2sfm425byc1nw3gg61m4o/poster_video_test.png?rlkey=sfa566iy391152wqzzp1cavpp&raw=1"
src="https://www.dropbox.com/scl/fi/9wl7c8vruwkl31271bion/video_test.mp4?rlkey=hghof491n51bhz6kbq1jyepc0&raw=1" playsinline="">
<track default=""
src="https://www.dropbox.com/scl/fi/cbp3z0m1huxx7bikkodd8/test.vtt?rlkey=4kp3gln0cuuamn8dn1yddejyx&raw=1" label="日本語" srclang="ja" kind="subtitles">
</video>
<figcaption>＜字幕が表示されない場合は、ここをON↑＞
</figcaption>
</figure>＜Dropboxリンクから生成↓＞
字幕情報を全行表示します。
〜水槽の周辺を整えました〜
(1)線がゴチャゴチャしてますが、水溢れ対策として、しっかりたるみを作っています。
(2)壁にコンセントとタイマーを吊るしています。
(3)水溢れ対策として、コンセントの上に、プラダンで屋根を作りました。
(4)台車です。色々、ゴチャゴチャ積んでいますが。。
(5)病院や高齢者施設に必ずありそう。ホームセンターでも目にしますよね。
(6)この台車を、この隙間に格納します。
(7)スッキリと納まります。
E(8)玄関側から見ると、裏側は殆ど見えません。
＜投稿から動的サイトへリンクする↓＞
動画や画像のサムネイルが、横幅一杯だと、圧迫感があるので、小さめに左側に表示する形（但しスマホでは横幅一杯になります)。
なお、以前はこのDropboxのURLに「rlkey=」の部分がありませんでした。「rlkey=」はDropbox側が再生権限を制御するためのものです。次に試しに、WordPressのカスタムhtmlで、この「rlkey=」を削除しますと、以前なら再生可能でしたが、現在は再生不可です。つまりWordPress側でも、セキュリティ機能が働いています。
さらに素晴らしいことを発見しました。「開始画面」「動画本体」「字幕」各ファイルは、同じDropbox内にあっても、つまりWordPressサーバーに存在しなくても、このWordPressのカスタムhtmlで呼び出して、同期することが可能です。つまりFinderからのファイル操作だけで完結できます。
動画再生テスト中(Googleドライブ)
Googleドライブに動画や写真を置いて、WordPressに表示させる方法は、WordPressサーバーの容量を抑えるのに有効です。しかし残念なことに、Googleドライブに置かれた動画に字幕ファイルを同期させる方法がなかなか見つかりません。もっと言うと、字幕ファイルをGoogleドライブ内外いずれに置いても、同期させることができません。これが、動画配信サーバーにGoogleドライブを使うのを躊躇する理由です。
＜Googleドライブの動画再生〜動画は再生されるが、字幕ファイルが呼び出せない。↓＞
以上です。