研究室のサーバーでflowplayerを使って動画を公開しているのですが、flowplayerのバージョンをあげたところ動かなくなり。。。以前から素直に動かなかったりスマフォなどへの対応がいまいちだったりしたのでMediaElement.jsに切り替えてみました。
動画ファイルはflvからmp4に切り替えていたので手順書通りにやれば素直に動きました。これはまず嬉しいです。
あっそうそう動かすにあたって１つだけ問題がありました。
上記の手順書通りに書いてみたのですが動画が再生されません。。。なぜかは以下のエントリーに書かれていました。「Basic認証がある環境だと動画を読み込み時、エラーになります。」とのことです。動画ファイルにアクセスするのに認証が必要な位置にあると（エラーは表示されませんが）動画も表示されません。
Link: スマートフォン向けHTML5のVIDEOタグを使った動画再生 〜MediaElement.js編〜
動画ファイルの位置を少し工夫してなんとかしました。この改善でSafari、Firefox、Chromeは表示できるようになりました。IE10も問題なく表示されました。
ただ、IE9は表示されません。IE9はFlashでの表示が必要とのことで、Flash Playerを入れ直してみたのですが効果がありません。よーくみるとプレイヤーは表示されて、データが読み込まれてプログレスバーも進んでいきます。
なぜこれで表示がでないんだろう？不思議です。とりあえずコーデックがないか？でもIE9ではH.264にデフォルトで対応しているので何もしなくても表示されるはずです。とりあえずmp4ファイルをダウンロードして直接表示してみると問題なく再生できます。
調べてみると以下が原因でした。ソフトウェアレンダリングにすると表示できるんじゃないかと。。。
Link: Internet Explorer 9 でソフトウェア レンダリングを有効または無効にする方法
具体的には以下です。IE9を起動して下図のチェックをオンにします。これでIE9でも表示できました。
ただ、私の環境はMac上のVMware Fusionで動作するWin7上のIE9です。リアルマシン上のIE9ではこの問題は起きないのかもしれません。とりあえず。。。情報まで。
あっそうそう。順番が逆転していますが、本家のサイトなどにもさらっと書いているので意外と手順がわからないという方もいるんじゃないかと思います。とりあえず動いたスクリプトの全体をあげておきますね。
その前にjohndyer-mediaelement-2.9.2-0-gb090320.zipを本家のサイトからダウンロードしてきて、展開したフォルダ内にあるbuildフォルダをWebサーバー上の以下のスクリプトと同じディレクトリに入れておきます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="build/jquery.js"></script>
<script src="build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="build/mediaelementplayer.min.css" />
</head>
<body>
<video width="320" height="240" id="player1" controls="controls" preload="auto">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="これが動画ファイルね.mp4"/>
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="320" height="240" type="application/x-shockwave-flash" data="build/flashmediaelement.swf">
<param name="movie" value="build/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=これが動画ファイルね.mp4" />
</object>
</video>
<script>
$('video').mediaelementplayer();
</script>
</body>
</html>プレイヤーのオプションはつけていません。あと、preload="auto"にしているところはサンプルと違いますね。preloadすることでプレイヤーに動画の最初の画像が表示されます。これは好みの問題かもしれませんね。
