うちのホームページはいままで動画はFlashで公開しとったんだけど、そろそろHTML5にしてみることにした。
というのも、最近はスマートフォンからのアクセスも多いから、Flashが再生できん場合には動画がみれん。
ICS向けにリリースされたAndroid版ChromeはFlashには対応しないとのこと。
これはもう、HTML5対応にするしかないと思って、重い腰を上げてみた。
で、困るのはHTML5に対応していないIE6とかの古いブラウザ向けの対応。
昨日、古いバージョンのIEは今後自動的に最新版にアップデートされるって発表されたから、今後はあまり気にしなくてもいいかもしれないけど、一応、対応しておきたい。
ソースをわけるのは面倒だけ、どうにか共通のソースで対応したいってことで探したらあった。
html5media
使い方はとっても簡単で、1行追加してJSを読み込むようにするだけ。
<script type="text/javascript" src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
動画表示用のソースもこんな感じで簡単。
<video width="500" height="350" autoplay>
<source src="video.mp4"></source>
<source src="video.ogv"></source>
</video>
ここでは、オプションで autoplay が指定されているけど、他にも いろいろなオプションがある。
・preload ページ読み込みと同時に自動的にデータのダウンロードが始まる。
・poster 動画再生開始までに表示するイメージ画像 (JPGなどを指定する)
・controls 一時停止、ボリュームなどのコントロール画面表示
sourceに指定するフォーマットは、MP4、OGV、WebMのうち必要なもの。
ブラウザが最適なものを選んで再生するらしい。
通常は、MP4とOGVを用意しておくといいらしいけど、OGVは結構ファイルサイズが大きくなるので、今回はMP4とWebMで対応することにした。
こちらのサイトによると、OGVに対応しているブラウザはたいていWebMにも対応しているみたいだから、まぁ、大丈夫かな。
これだけで、HTML5に対応したブラウザではそのまま動画が再生されて、対応していないブラウザではFlashのPlayerが呼び出されて再生される。
動画の変換には、html5media でも紹介されている Miro Video Converter を使った。
操作はとっても単純。
これでOK、と思って早速ファイルをアップロードしてみたんだけれど問題発生。
Safari で再生すると、再生開始までにめちゃくちゃ時間がかかる。
どうも、ストリーミング再生になってなく全データをダウンロードしてから再生開始している模様。
原因は、MP4ファイルの形式に問題があるらしい。
ということで、Miro Video Conberter で変換したMP4ファイルを MP4box というツールで再度、変換した。
変換といっても、再エンコードはされないから画質の劣化もないし時間もかからない。
コマンドラインから下記のコマンドを入力すると変換できる。
# MP4Box -add [元MP4ファイル名] -new [新MP4ファイル名]
これで、Sarafiからもストリーミング再生できるようになった。
あと、最初IE9で再生できんかったのは、 .htaccess に下記を追記したらできた。
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
＝＝＝ 追記 2014.10.13 ＝＝＝
<video>タグでmp4の動画が再生されない（解決法）
あと、IE9において再生できないことがあった。
全てのmp4ではなく、再生できるものもある状態。
上記リンク先の情報を参考に「document.getElementsByTagName(“video”)[0].error.code」で確認したところ、エラーコード 3と表示された。
再エンコードすると直る場合があるらしいが、いろいろパラメータを変更したが直らなかった。
結局、原因はわからないがvideoタグのパラメータに autoplay を指定する、あるいはpreload=”auto”を指定すると全てのmp4ファイルが再生できるようになった。
続いて、スマートフォン向けの対応。
とりあえず、このままでも再生できるんだけれど、動画に表示されるコントロールパネルの再生ボタンが押しにくい。
パソコンでクリックするのには問題ないんだけれど。
で、パラメータにonclickを追加してみることにした。
<video width="500" height="350" onclick="this.play();">
<source src="video.mp4"></source>
<source src="video.ogv"></source>
</video>
これで、動画の画面部分をクリックすることでも再生を開始できるようになった。
だけど、これも問題発生。
最初の再生は問題なくできるんだけど、一時停止してからの再生のときは、再生できなりできなかったりする。
どうも、再生開始の処理がかぶってしまってうまく動かないらしい。
ということで、再生時間が0 つまり、まだ再生開始していないときだけ、画面のクリックで再生できるように変更した。
<script>
function playVideo() {
var video = document.getElementById("mainvideo");
if (video.currentTime == 0) {
video.play();
}
}
</script>
<video id="mainvideo" width="500" height="350" onclick="playVideo();">
<source src="video.mp4"></source>
<source src="video.ogv"></source>
</video>
これで、一時停止、再開もできるようになった。
ついでにもう１つ。
AUDIOタグも使ってみたんだけれど、IE9でコントロールが表示されない現象が発生。
これじゃあ、クリックして再生できない。
これは、オプションで preload を無効にしていたのが原因だった。
あと、source には .mp3 と .ogg の2種類を用意したんだけど、 ソースを書く時に、.mp3の方を先に書かないと、Safari で再生できんかった。
無理やり .ogg を再生しようとでもしているんだろうか？