WordPressの埋め込み動画で、再生前のビデオ画面が無地になるのを防ぐショートコードの作成

未対策：埋め込み動画

poster 属性でサムネイル画像を指定していない場合の動画を示します。　動画開始前、PCのブラウザではvideo画面が黒地、iPhoneブラウザでは、video画面が白地になっていると思います。

 

動画先頭の開始時間を指定してサムネイルを表示するには（予備知識）

WordPressは、videoを埋め込む方法が色々あります。　例えば下に示す[video]ショートコードで、簡単にvideoを埋め込むことができます。（詳細はこのリンクをクリック）　この[video]ショートコードの場合、動画のcontrol表示がブラウザに依らないで同一になるのが良い所ですが、動画の開始時間を指定出来ません。　

 shortcode
[ video src="video-source.mp4"]

 

一方、下で示すオーソドックスな<video>タグで埋め込む場合、videoファイルの最後尾に #t=0.1 を添えると 0.1秒 から動画が開始できる様になることが分かりました。　つまり、0.1秒目 の動画サムネイルが表示されます。　また、#t=0 にすると、今度はposter画像のサムネイルが表示できます。

 html
<video src="video-source.mp4#t=0.1 " poster="poster.png" controls></video>

注記：
videoファイルの最後尾に #t=0.1 を添える方法は、 HTML5の仕様 では実際のところサポートされていない様ですが、下のURLで実例が説明されていました。
https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/

 

 

作成したショートコードの概略仕様

 

「Post Snippets Plugin」を使ったショートコードの作成

Post Snippetsプラグインのインストールや使い方は、「小技・事例集」を参照してください。

Post Snippets（バージョンは3.1.6） 設定画面は以下の通りで、番号を振ったエリアに従って説明します。　（Post Snippets の最新バージョンは4.xになっていますが、一部不具合と使い勝手が悪く3.1.6バージョンを使っています。）

先ず、「Add New Snippet」ボタンを押します。

① エリアのUntitledにショートコードの名称を記入します。　ショートコード名を、video_with_Thumbnail にしました。

② エリアに下のHTMLコードをコピペします。 { } で囲まれた{width}、{url}、{time}、{poster_url} が変数です。　この変数が、ショートコードオプションになります。

注記：posterの画像（poster.png）は予めアップロードしておき、poster.pngはフルパスで記入します。

③ Variables（変数）をカンマ区切りで記述し、「 =」の後がデフォルト値になります。　下で示す内容を ③ エリアに記述します。

width=100%,url,time=0.01,poster_url=poster.png

④ エリアにショートコード化するので、レ点を入れます。　 ⑤ エリアにはPHPを使っていないので無記入のままです。

⑥ エリアにショートコードの簡単な説明を記載します。（下記は参考です）

wdth:video幅を%またはpx単位の数値で指定、url:videoファイルのパス、time:video開始時間（サムネールの表示）

 Save  ボタンを押して保存すれば、[video_with_Thumbnail] ショートコードの完成です。　

 

完成した[video_with_Thumbnail] ショートコードの使い方

ビジュアルエディタで、Post Snipets ボタンを押して、「video_with_Thumbnail」を選択すると下の様に、ショートコードがエディタに挿入されます。

 shortcode
[video_with_Thumbnail width="100%" url="" time="0.01" poster_url="poster.png"]

 

ページ速度改善に向けて（オプションとして）

動画が画面に入ったらvideoファイルのローディングを開始することでページ速度の改善が期待できます。　このため、「inview.js」を使用しました。　必要なければ以下の説明は読み飛ばしてください。 

前記②エリアに入れたHTMLコードの preload="autoe" を preload="none" に書き換えておく必要があります。　また、inview.jsは、inview.js (GitHub)を開き、  < > Code ボタンを押して、Download ZIPを選択してダウンロードします。　ZIPファイルを解凍して、サイトのドメイン内に jquery.inview.min.jsファイルをアップロードしておきます。

 

以上の、ショートコードを使用することで、iPhoneのブラウザでvideo再生前の画面が無地になることを防ぐことができると思います。