WebLabyrinth site image

WebLabyrinthWebに関する様々なメモや個人的実験を行うサイトです

Navi box open

VideoJS – HTML5 Video Player for WordPress

WordPressでフラッシュビデオを再生できるプラグイン「VideoJS – HTML5 Video Player for WordPress」のインストールと実装までをテストしてみました。

HTML5 Video Player | Video.js
http://www.videojs.com/

まずはプラグインをWordPressにインストール。
これはプラグインの検索からインストールできるので簡単です。インストールしたら有効化します。

ビデオファイルの用意

とりあえず再生する素材がないと話にならないので、適当なビデオファイルを用意・・・。
作成したファイルをサーバーにアップロードします。

アップしたmp4ファイルをプラグインプレイヤーで再生できるようにするわけですが、公式の埋め込み方法を下記デモページのソースを参考に設置していきます。

Video.js | HTML5 Video Player (Demo)
http://www.videojs.com/video-js/demo.html

デモページをよく見たらmp4形式以外にも、webmという形式とogvという形式の動画ファイルも必要みたいです・・・。
端折っても問題ないかも知れないけど、一応用意してみます。
webmとogv形式のコンバータはこちらを使用してみました。

Miro Video Converter FREE – Convert any video to MP4, WebM (vp8), iPhone, Android, iPod, iPad, and more.
http://www.mirovideoconverter.com/

コンバートしたmp4とwebmとogvファイルをアップロード。
ビジュアルエディタからプラグインの埋め込み用アイコンをクリックして、各フォーマットのファイルURLを設定してページに埋め込んだ状態がこちらになります。

HTML5 video player 設置デモページ
http://demo.weblabyrinth.net/html5-video-player-demo/

むむ!?動かない・・・?IE8未満で閲覧したときはswf経由で再生するのは確認できますが、HTML5でうまく動作していないみたいですね。
只今何が悪いのか原因調査中です・・・。

原因というか仕様だったのですが、動作確認したブラウザがFirefox4で、mp4に対応していないとのこと・・・。しかし公式のサイトではwebm形式に切り替わってうまく再生されているので、まだ変なところはありそうですね・・・。調べてみると参考になりそうなサイトに巡り合えたため、こちらを見ながら紐を解いていくのが良さそうです。(このページはgoogle clomeで見たところ、普通に再生されました。)

HTML5で実現できるマルチメディア系機能 ここが違う!サンプルで見るHTML5
http://codezine.jp/article/detail/5615?p=2

HTML5リファレンス <video>タグで動画を埋め込む
http://www.htmq.com/html5/004.shtml

2011-06-21追記
その後の調べで判ったのですが、当サイトがロリポップサーバを使用していて、デフォルトのサーバー設定でContent-typeにmp4とogvとwebmが登録されていないことがわかりました。
そのため、.htaccessでContent-typeの追記を行ったところ、無事再生の不具合が解決しました。

AddType "video/ogg" ogv
AddType "video/webm" webm
AddType "video/mp4" mp4

これでOKです!

この記事を書いた人

ニックネーム: SHIBAZAKI
ブログ: https://weblabyrinth.net

北海道旭川市でweb関係のお仕事をしています。

Trackback URL

https://weblabyrinth.net/video-js-html5/trackback/

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください