WordPressの本文にプラグインなしで独自の動画を挿入・再生させるようにする方法



WordPressのコンテンツとして使ってみたいものの中に「画像」や「動画」がありますね。

何かの説明をする際に図や動画で説明を加えると本当に分かりやすくなりますからそうした種類のサイトでは是非使ってみたいところだと思います。

こんなときにはWordpress得意のプラグインで!!と言いたいところですが、動画を挿入するプラグインは複雑なものが多かったり、挿入できる動画に制限があったりしてなかなか「これ!」というものが見つかりにくいのも確かです。それだけプラグイン作者の思いとサイト制作者の思いがさまざまなのだと思います。私も動画に関するいろいろなプラグインをテストしましたがなかなか「これ!」というものがなく、当サイト内たくさんのプラグインを紹介しているものの、動画に関してのプラグインはほとんどありません。

そこで今回は特別なプラグインを使わずに投稿や固定ページの本文内で動画の挿入・再生を行ういろいろな方法、扱える動画の種類、動画を使ったコンテンツでの注意点などを紹介していきます。



どんな動画ファイルが再生できるのか??

アップロードできる(扱える)ファイルの一覧は公式Codex

で紹介されています。この中で動画だけを抽出すると

  1. mp4、.m4v(MPEG-4)
  2. mov(QuickTime)
  3. wmv(Windows Media Video)
  4. avi
  5. mpg
  6. ogv(Ogg)
  7. 3gp(3GPP)
  8. 3G3P2(3GPP2)

これらのファイルについてはメディアライブラリにアップロードして使用できるようです。

ただ、メディアにアップロードできるファイルの大きさがデフォルトでは限られていますので、大きなファイルサイズの動画をアップロードするためには

画像や添付ファイルの標準最大サイズ2MBを大きくする方法がわかりません。ネットで調べたのですが、難しい専門用語ばかりで理解ができません...難しいことは置いといて、プラグインを使って簡単に.htaccessの編集ができる方法を紹介します。

を参考に容量の拡張を行う必要があります。

※容量の大きいファイルはFTPクライアントソフトを使ったり

「File Manager」プラグインを使うと、Wordpressの管理画面で操作しているのにも関わらず、パソコンのエクスプローラーやFTPソフトのようにファイルの操作、移動、コピー、アップロード、ダウンロードができるようになります。

を使って「uploads」ディレクトリなどへ直接アップロードして再生させることも可能ですが、管理を考えるとメディアへアップロードできるようにした方が楽だと思います。

本文内に動画を挿入して再生させる方法の例

URLを直接挿入して使用する方法

使用しているテーマによっては動画のURLを挿入するだけで再生できる場合があります。試しにアップロードした動画のURLを張り付けてみてください。

この方法で再生でき、特にオプションが必要なければこの方法が一番簡単です。ただし、幅や高さなどデザイン要素に関する事柄についてはテーマのCSSへ追記する必要があります。

WordPressのショートコードを使用する方法

[video]
というショートコードを挿入することで動画の再生を行うことができます。

一番単純な使い方は

[video src=”video-source.mp4″]
です。video-source.mp4の部分にメディアなどへアップロードした動画URLを挿入するだけです。

このショートコードでは’mp4′, ‘m4v’, ‘webm’, ‘ogv’, ‘wmv’, ‘flv’形式のファイルが使用できます。

またこのショートコードには追加パラメーターがあり、

  1. poster/再生前の画像
  2. loop/繰り返し再生するか(offまたはon)
  3. autoplay/自動再生するか(offまたはon)
  4. preload/ページ表示時に動画を読み込んでおくか(”metadata“-動画に設定された文字列 ”none”-なし ”auto”-自動から選択)
  5. height(数字で指定)
  6. width(数字で指定)

を追加することでいろいろな動作の指定が可能です(赤字は何も指定しなかった場合の動作)。

videoタグを使用する方法

通常のhtmlタグを使って挿入する方法です。環境によっては動作しない場合もありますので、そのときは上のショートコードを使用するといいでしょう。

基本となるタグは

<video src=”動画のURL”></video>

になります。これもいろいろなパラメーターがあり

  1. width/幅
  2. height/高さ
  3. autoplay/自動再生(trueまたはfalse
  4. controlbar/再生バー(yesまたはno)
  5. loop/繰り返し再生するか(trueまたはfalse)

などのオプションが指定できます。ショートコードのパラメーターと似てますね。それらを挿入したコードは

<video src=”動画のURL” width=”600″ height=”380″ autoplay=”true” controlbar=”no” loop=”false”></video>

こんな感じになります。

ショートコードと異なるのは再生バーを表示するか否かの違いです。再生バーが不要な場合にはhtmlタグを使うことで非表示にできますが、自動再生・繰り返し再生させる場合に再生バーを非表示にしてしまうと訪問者の判断で停止できなくなってしまうので注意が必要かと思います。

動画挿入で気を付けるべきこと

サイトに動きを持たせるために動画を使用しよう!!というのはいいアイディアではありますが、注意することもあります。それは大きな動画もページ表示時に読み込まれるということです。

これは単純にアクセスされたページの転送量が多くなって表示が遅くなるという弊害だけでなく、当然表示するためのサーバーパワーも必要となります。アクセス数が多いとサーバーがハングアップしたり、転送量オーバーを起こしてしまうこともあり、利用しているサーバーによっては転送量の制限がかかったり最悪の場合はアカウント停止となることもあります。

これを回避するためには

  1. Youtubeなど外部の動画配信サイトへ動画を保存し、それらの再生タグを埋め込んで表示する
  2. 動画の容量をできるだけ小さくする

ことが大事になります。

ただ後者では動画の容量を小さくする=画質が粗くなったり動作がスムーズでなくなったりすることに直結しますから、個人的には前者の方法が無難だと思います。

Youtubeではアップロードした動画を簡単に埋め込めるように共有タグが用意されていますからそれを活用するようにしましょう。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

2,894 円 (税込) 送料込
<p>【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください】<..
Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

2,570 円 (税込) 送料込
あらゆるビジネスサイトで使える企画・設計・制作・運 田中勇輔 翔泳社ウェブ タントウシャ ノ タメノ ワードプレス ガ ワカル ホン タナカ,ユウスケ 発行年月:2015年09月15日 ページ数:287p サイズ:単行本 ISBN:9784798142708 田中勇輔(タナカユウスケ) Webディレク..
楽天ウェブサービスセンター CS Shop
トップへ戻る