【WordPress】動画は、カスタムHTMLブロックで直接書くのが扱いやすい。


<自宅サーバー発信の字幕付き動画サンプル>

<字幕が表示されない場合は、ここをON↑>
字幕情報を全行表示します。

〜水槽の周辺を整えました〜
(1)線がゴチャゴチャしてますが、水溢れ対策として、しっかりたるみを作っています。
(2)壁にコンセントとタイマーを吊るしています。
(3)水溢れ対策として、コンセントの上に、プラダンで屋根を作りました。
(4)台車です。色々、ゴチャゴチャ積んでいますが。。
(5)病院や高齢者施設に必ずありそう。ホームセンターでも目にしますよね。
(6)この台車を、この隙間に格納します。
(7)スッキリと納まります。
E(8)玄関側から見ると、裏側は殆ど見えません。


上の動画は、117秒、フレームサイズ480×270、24MBと非常に小さいmp4ファイルでして、自宅サーバーから配信しています。確かに、YouTubeやVimeoと比べると画質は落ちますが、目的によってはこれで十分です。例えば、ブログ文章、写真、で伝わりにくいことを動画で補うなど。最近、ブログの次はVlogだ、などと流行っているようですが、要は、様々なメディアを混在させてブログをより役立つようにさせる、ということかと思います。

YouTubeやVimeoを利用するための方法は巷に溢れていますので、今回は、それ以外の方法として、その一つ、「WordPressを利用した動画配信」を説明します。但し、一捻り入れることによって、慣れ親しんでいるパソコン作業のまま、即ちフォルダ内のファイルを手直しする作業、それをするだけで、わざわざアップロードすることなく、手直しされる。その仕組みを作成しようと思います。

次に具体的な作業のポイントを説明します。

ポイント解説

1 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=””」を削除すると、インライン再生されなくなります。

2 字幕用のvttファイルを単独に差し込んで使えるおかげで、更新が非常にラク。

どういうことかと言いますと、動画に文字を書き込む場合、文字を焼き付ける、つまり動画の書き出し作業が伴います。漢字の間違いを直したい(私はよくあります。)、文章表現を変更したい、それだけとしても文字を直した後の加工時間が非常に長く掛かります。ところが、字幕用ファイルを使うと、vttファイルを使うと、vttファイルをテキストエディタで修正して保存しただけで、即、反映します。
動画を流しながら、vttファイルに、字幕を入れたい時刻を打ち込む、字幕を打ち込む、そうした作業でvttファイルを作ることが出来ます。短い動画ならそれがラクかも知れません。時刻を、場面に合わせて打ち込んでくれるアプリもありますので、それを利用するのが便利かもしれません。

私は字幕工房というアプリを使っています。欠点はsrtファイルで作成されるので、srt→vttへ変換が必要になる点です。

ともかく、vttファイルの記述は以下です。

WEBVTTの後に、必ず2行、改行します。

なお、vttファイルは、シンプルな記述しか出来ません。唯一、<b> </b>で囲んだ文字は太字になります。

WEBVTT


STYLE
::cue {
  background-image: none;
  background-color: black;
  color: white;
 text-align: none;
}
/* スタイルブロックは空白行も  "ハイフンハイフン大なり" も使用できません。text-align: startにしても効果がありません。各時刻の後に、英字1スペースをあけてalign:left を入れると左寄せされます。*/

NOTE コメントブロックはスタイルブロックの間で使用できます。

STYLE
::cue(b) {
  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)病院や高齢者施設に必ずありそう。ホームセンターでも目にしますよね。

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)玄関側から見ると、裏側は殆ど見えません。

00:01:58.767

3 Finder、FTPから直接手直し

上の動画は、上記1で説明のように、mp4(動画用)、png(サムネイル用)、vtt(字幕用)の3つのファイルで作られています。そのうち、mp4とpngは、Finderから自宅サーバーを呼び出して、直接修正や上書きが出来ます。但し、vttは、外部レンタルサーバーをFTPで呼び出して、直接修正や上書きが出来ます。FTPとFinderの使い勝手はよく似ています。

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab

以上です。