ショートコードで簡単にHTML5プレイヤーが埋め込めるWordPressプラグイン「MediaElement.js」

ショートコードで簡単にHTML5プレイヤーが埋め込めるWordPressプラグイン「MediaElement.js」

,
,

以前 Projekktor Video Tag Extension という動画埋め込みプラグインを紹介しましたが、MediaElement.js はオーディオプレイヤーも埋め込むことができるシンプルな構成のプラグインです。

Projekktor Video Tag Extension と同様に、ショートコードで HTML5 プレイヤーを設置することができます。

MediaElement.jsのインストール

インストール手順は以下の通りです。

  1. MediaElement.jsをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、MediaElement.jsプラグインを有効化します。

MediaElement.jsの設定

管理画面の [設定] – [MediaElement.js] から設定を変更できます。

MediaElement.jsの設定

Video Settings

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

Audio Settings

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

ビデオやオーディオの埋め込み手順

ビデオを埋め込む場合

ビデオ(動画)を埋め込む場合、以下のようにショートコードを記述します。

[[video src="http://mysite.com/mymedia.mp4"]]

以下のようにショートコード内で横幅や高さを指定することもできます。

[[video src="http://mysite.com/mymedia.mp4" width="640" height="360"]]

オーディオを埋め込む場合

オーディオ(音声)を埋め込む場合、以下のようにショートコードを記述します。

[[audio src="http://mysite.com/mymedia.mp3"]]

動画がうまく再生されないとき・・・

埋め込んだ動画がうまく再生されないときは、.htaccess に以下を記述して MIME タイプを追加してみてください。


AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

あとがき

YouTube 動画を貼り付ける方が簡単ではありますが、他のサイトとちょっと差をつけたいという方は試してみてください。

WordPress レッスンブック 3.x対応

posted with ヨメレバ
エビスコム ソシム 2010-09-08
Amazonで購入
Kindle
楽天ブックスで購入

投稿者

himecasのアバター
himecas
慢性鼻炎のhimecasですヽ(^o^)丿 TechMemoを見て、誰か一人でも役に立ったと思ってもらえたら本望です。 プロフィール詳細やお問い合わせについてはAboutページをご覧ください。

新着記事

5件のフィードバック

  1. sallyのアバター
    sally

    himecasさん、はじめまして
    最近ＷＰで背伸びしたカスタマイズに挑戦しているものです
    こちらのトピックを参考にさせていただきプラグイン「MediaElement.js」を有効化させて動画をアップに挑戦しました
    おかげさまで、クロームやIEでは再生に成功したのですがfirefoxでは
    MIMEタイプはサポートしていないとエラーが出ます
    そこで、ご助言の通り.htaccess内を以下のように追記編集してみたのですが500エラーが出てしまいます

    # BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]


# END WordPress

SetEnvIf Request_URI ".*" AllowCountry

SetEnvIf Request_URI ".*" WpLoginNoLimit

-ここから追記-
AddType video/ogg .ogg .ogv 
AddType video/mp4 .mp4 
AddType application/ogg .ogg .ogv
-ここまで-

    もともと用意されていた.htaccessに追記したのですが、これで良かったのでしょうか
    なにか記述ルールが間違っているのでしょうか
    ちなみに、サーバーはxdomainの無料サーバーを使っており、管理画面から編集しました

    ご助言いただけましたらありがたいです！

    返信
    1. himecasのアバター
      himecas

      マニュアルによると、エックスドメインではAddTypeが制限されているみたいです。

      返信
      1. sallyのアバター
        sally

        himecasさま

        ご面倒を見ていただいて本当にありがとうございました
        問題に対して目の付けどころがやはり違いますね。。。
        もうわからないことがわからないという有様のとんちんかんな質問で恥ずかしいです

        AddTypeが制限されているサーバー環境ではMP4ファイルをfirefoxで再生することはできないという理解でよろしかったでしょうか
        IEやクロームでは美しいインターフェースでアップできているのに悔しいです！
        himecasさまでしたらどのように対応されるでしょう
        フラッシュムービー形式でアップするという考え方もありでしょうか？
        重ねてご意見を聞かせていただけたら幸いです

        返信
        1. himecasのアバター
          himecas

          そうですね、別の形式だったら再生できるかもしれません。

          他のプラグインも試してみるのはいかがでしょう？例えば、Projekktor Video Tag Extensionだと、動画が再生できない時は自動的にFlashで再生してくれます。

          代替プラグインが見つからない場合は、Firefoxを切り捨てるか、諦めてYouTubeを使います・・・

          返信
          1. sallyのアバター
            sally

            himecasさま

            ご助言、ありがとうございました！
            ご紹介のトピックを見落としていました
            MP4形式だけでなく、Flash形式でも自動サポートしてくれるなんて素晴らしいです
            ぜひ、トライしてみます

            >代替プラグインが見つからない場合は、Firefoxを切り捨てるか、諦めてYouTubeを使います・・・

            今回は、クラウドを使いたくないのでFirefoxを切り捨てる方向です(涙)

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です