WordPressのコンテンツとして使ってみたいものの中に「画像」や「動画」がありますね。
何かの説明をする際に図や動画で説明を加えると本当に分かりやすくなりますからそうした種類のサイトでは是非使ってみたいところだと思います。
こんなときにはWordPress得意のプラグインで！！と言いたいところですが、動画を挿入するプラグインは複雑なものが多かったり、挿入できる動画に制限があったりしてなかなか「これ！」というものが見つかりにくいのも確かです。それだけプラグイン作者の思いとサイト制作者の思いがさまざまなのだと思います。私も動画に関するいろいろなプラグインをテストしましたがなかなか「これ！」というものがなく、当サイト内たくさんのプラグインを紹介しているものの、動画に関してのプラグインはほとんどありません。
そこで今回は特別なプラグインを使わずに投稿や固定ページの本文内で動画の挿入・再生を行ういろいろな方法、扱える動画の種類、動画を使ったコンテンツでの注意点などを紹介していきます。
どんな動画ファイルが再生できるのか？？
アップロードできる（扱える）ファイルの一覧は公式CodexWordPressでのファイルのアップロードについてで紹介されています。この中で動画だけを抽出すると
- mp4、.m4v（MPEG-4）
- mov（QuickTime）
- wmv（Windows Media Video）
- avi
- mpg
- ogv（Ogg）
- 3gp（3GPP）
- 3G3P2（3GPP2）
これらのファイルについてはメディアライブラリにアップロードして使用できるようです。
ただ、メディアにアップロードできるファイルの大きさがデフォルトでは限られていますので、大きなファイルサイズの動画をアップロードするためには
を参考に容量の拡張を行う必要があります。
※容量の大きいファイルはFTPクライアントソフトを使ったり
を使って「uploads」ディレクトリなどへ直接アップロードして再生させることも可能ですが、管理を考えるとメディアへアップロードできるようにした方が楽だと思います。
本文内に動画を挿入して再生させる方法の例
URLを直接挿入して使用する方法
使用しているテーマによっては動画のURLを挿入するだけで再生できる場合があります。試しにアップロードした動画のURLを張り付けてみてください。
この方法で再生でき、特にオプションが必要なければこの方法が一番簡単です。ただし、幅や高さなどデザイン要素に関する事柄についてはテーマのCSSへ追記する必要があります。
WordPressのショートコードを使用する方法
[prismpre]
<figure class="wp-block-video"></figure>
[/prismpre]というショートコードを挿入することで動画の再生を行うことができます。
一番単純な使い方は
[prismpre]
<figure class="wp-block-video"><video controls src="video-source.mp4"></video></figure>
[/prismpre]です。video-source.mp4の部分にメディアなどへアップロードした動画URLを挿入するだけです。
このショートコードでは’mp4′, ‘m4v’, ‘webm’, ‘ogv’, ‘wmv’, ‘flv’形式のファイルが使用できます。
またこのショートコードには追加パラメーターがあり、
- poster／再生前の画像
- loop／繰り返し再生するか（offまたはon）
- autoplay／自動再生するか（offまたはon）
- preload／ページ表示時に動画を読み込んでおくか（”metadata“－動画に設定された文字列 ”none”－なし ”auto”－自動から選択）
- height（数字で指定）
- width（数字で指定）
を追加することでいろいろな動作の指定が可能です（赤字は何も指定しなかった場合の動作）。
videoタグを使用する方法
通常のhtmlタグを使って挿入する方法です。環境によっては動作しない場合もありますので、そのときは上のショートコードを使用するといいでしょう。
基本となるタグは
[prismpre]
<video src="動画のURL"></video>
[/prismpre]になります。これもいろいろなパラメーターがあり
- width／幅
- height／高さ
- autoplay／自動再生（trueまたはfalse）
- controlbar／再生バー（yesまたはno）
- loop／繰り返し再生するか（trueまたはfalse）
などのオプションが指定できます。ショートコードのパラメーターと似てますね。それらを挿入したコードは
[prismpre]
<video src="動画のURL" width="600" height="380" autoplay="true" controlbar="no" loop="false"></video>
[/prismpre]こんな感じになります。
ショートコードと異なるのは再生バーを表示するか否かの違いです。再生バーが不要な場合にはhtmlタグを使うことで非表示にできますが、自動再生・繰り返し再生させる場合に再生バーを非表示にしてしまうと訪問者の判断で停止できなくなってしまうので注意が必要かと思います。
動画挿入で気を付けるべきこと
サイトに動きを持たせるために動画を使用しよう！！というのはいいアイディアではありますが、注意することもあります。それは大きな動画もページ表示時に読み込まれるということです。
これは単純にアクセスされたページの転送量が多くなって表示が遅くなるという弊害だけでなく、当然表示するためのサーバーパワーも必要となります。アクセス数が多いとサーバーがハングアップしたり、転送量オーバーを起こしてしまうこともあり、利用しているサーバーによっては転送量の制限がかかったり最悪の場合はアカウント停止となることもあります。
これを回避するためには
- Youtubeなど外部の動画配信サイトへ動画を保存し、それらの再生タグを埋め込んで表示する
- 動画の容量をできるだけ小さくする
ことが大事になります。
ただ後者では動画の容量を小さくする＝画質が粗くなったり動作がスムーズでなくなったりすることに直結しますから、個人的には前者の方法が無難だと思います。
Youtubeではアップロードした動画を簡単に埋め込めるように共有タグが用意されていますからそれを活用するようにしましょう。
ポチップ
ポチップ
