※この記事にはプロモーションが含まれています。

HTML5のvideoタグを使って動画を貼り付ける方法

Flash動画(swf)はスマートフォンでは再生できない。前々から困ったなあと思っていたのだけれど、HTML5のVideoタグなら動画データの切り替えができるようなのでそれを試してみた。

各種ブラウザに対応するためにmp4ファイル、webmファイル、ogvファイルを用意して、それぞれに自動で対応する。

・・・のはずなのだが、全くうまくいかないので、現在試行中。

ちなみにHTML5未対応のIEでは再生できません。

最終的には次の4つで完結。(たぶん)

①mp4・webm・ogv・swfへの変換ができるソフト
②MediaElement.js
③MIMEの設定
④Post Snippets(Wordpressのプラグイン)

①ソフトはAny Video Converterを使用。Miro Video ConverterもOK。いろいろ試したけれど、結局のところ大差はない。webmは必ずしも必要ではないかもしれない。webm対応のブラウザーはogvにも対応してるから。

AVC

MediaElement.jsはHTML5+Flashのフォールバックを組むには必須。これを使用することでHTML5に未対応のブラウザーに対して、代替オブジェクトとしてswfファイルを流すことができる。
オープンソースをダウンロードしたら、buildフォルダをmediaelementにリネームして自サーバにアップしたのち、ページのHEAD部分に下記ソースを追記。

  

 で、記事に書いたソースがこれ。


 ③MIMEの設定をしないとダメな場合もある。

FireBirdの場合はサーバ管理画面から設定する。

MIME

④Wordpressでソースが乱れる(自動的に修正されてしまう)のが嫌な場合は、プラグイン「Post Snippets」を使ってショートコード化するといい。

以上でHTML5対応のブラウザで動画再生ができる。対応していないブラウザの場合は、代わりにFlashムービーを流す。・・・・でも、Wordpress自体がいまいちIEに対応していないので、IEでの再生はやっぱり不安定かな。

ブラウザVersion再生ファイル
Google Chrome30.0mp4
Opera17.0ogv
FireFox24.0mp4
safari5.1.7mp4
IE66.0.2900swf
IE1010.0.9200mp4

※この記事にはプロモーションが含まれています。[PR]

[この記事を書いた人] おき兄
デジタル世界で遊び続けて十余年。ガジェット大好き。組み立てたり壊したりするのも好き。昔はマザーボードに美しさを感じたりしていました。最近はVR/MRに傾倒。Xアカウント:@Okiniでも情報共有。

スポンサーリンク

シェアする

フォローする

スポンサーリンク