« | »

2014.07.20

WordPressに動画ファイルを直接埋め込む

WordpRessで動画を埋め込むといえばYouTubeやニコニコ動画へのリンク経由で記事に埋め込む動画が一般的です。

多くの場合はWordPressが設置されているサーバーはレンタルサーバーですので、容量の関係からもそのほうが合理的です。

しかし自前でサーバーを準備している場合に別途YouTubeにアップロードするというのも面倒です。

誰かがアップロードした動画ならば致し方ないですが、自分で作った動画をクラウドに預けるというのは個人的には好みではありません。

 

なので自前のサーバーに保存している動画ファイルを直接WordPress記事に動画ウィンドウとして埋め込むプラグインをインストールしてみました。

ただ自前のサーバーに動画ファイルを保存してそれを記事に埋め込むというプラグインは殆ど選択肢がありません。

Flashを使用するプラグインもありますが、残念ながらWordPress Ver2.9以降更新が停止していますので使用するのはちょっと危険です。

 

唯一と言える方法は、HTML5ビデオフレームワークを利用する”MediaElement.js”を使用するのがベストかと思います。

WordPressようにもプラグインが存在しますので、これを利用したいと思います。

 

プラグインの新規追加で”MediaElement.js”を検索してインストールし有効化します。

有効化が完了すると、設定メニューに”MediaElement.js”が現れます。

ここではデフォルトで埋め込む動画形式、音声形式を指定することが出来ます。

 

Video Settings

Default Width:ビデオプレイヤーの横幅を指定します。
Default Height:ビデオプレイヤーの高さを指定します。
Default Type:ビデオのMIMEタイプやコーデックを指定できます。
Video Skin:ビデオプレイヤーのスキンを選択します。

Audio Settings

Default Width:オーディオプレイヤーの横幅を指定します。
Default Height:オーディオプレイヤーの高さを指定します。
Default Type:オーディオのMIMEタイプやコーデックを指定できます。

 

次にブラウザに動画ファイルを認識させるために、MIMEタイプを動画ファイルが保存されるディレクトリもしくは親ディレクトリの”.htaccess”に追加します。

ここまで設定するとショートコードで動画を埋め込むことが可能となりますので、サーバーに保存されている動画ファイルをURL形式で指定します。

 

&#91video src=”http://exsample.com/movie.mp4″&#93

横幅・高さも指定できます。

&#91video src=”http://exsample.com/movie.mp4″ width=”640″ height=”360″&#93

poster属性を指定すると動画のサムネイルを表示できます。

&#91video src=”http://exsample.com/movie.mp4″ width=”640″ height=”360″ poster=”http://exsample.com/movie.jpg”&#93

音楽データを指定する場合は下記のようになります。

&#91audio src=”http://exsample.com/sound.mp3″&#93

 

そして実際に埋め込んだ動画。


次回の電子工作の部屋用に作成した、ソフトウェアPWMによるLED調光テストの様子を撮影したものです。

 

Trackback URL

Comment & Trackback

No comments.

Comment feed

Comment





XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">