HTML5 video テスト

この記事ではJavascriptを使用しています。

 

HTML5のvideoタグによる動画再生

HTML5 videoタグのみで表示しています。動画ファイルはMP4(H264AVC+AAC)とWebm(VP8+ogg)を用意しています。

ソースコードは以下の通りです。

<video poster="/media/images/20080518_rune.jpg" width="640" height="512" controls autobuffer><source src="/media/videos/20091101_aden.mp4" ><source src="/media/videos/20080518_rune.webm" > 動画を再生するには、videoタグをサポートしたブラウザが必要です。 </video>

※MP4はアデン戦、WebMはルウン戦に変更し、実際にはどちらが再生されているか判別しやすいようにしました。
※Drupalの入力書式が【Full HTML】の場合は、sourceなどの記述が重複したりcontrolsやautobufferの記述方法が変更されたり、tabindex="0"が追加されたりしてWYSIWYGエディタの影響を受けるようです。特に弊害はないようですが、気持ち悪いので【no Filtered】にしています。
※posterでブラウザがビデオフォーマットに未対応の際に表示する画像ファイルを設定してあります。また、ブラウザがHTML5未対応の場合はメッセージを表示するようにしてあります。

 

JW PlayerによるHTML5対応

JW Playerを使って。HTML5対応と従来のFlashに対応して表示しています。動画ファイルはMP4(H264AVC+AAC)とWebm(VP8+ogg)を用意しています。

ソースコードは以下の通りです。

<script type="text/javascript" src="/media/mediaplayer/jwplayer.js"></script>
<div id="mediaplayer">動画を再生するには、videoタグをサポートしたブラウザもしくはAdobe Flash Playerが必要です。</div>
<script type="text/javascript">
  jwplayer('mediaplayer').setup({
    'id': 'playerID',
    'width': '640',
    'height': '512',
    'image': '/media/images/20091101_aden.png',
    'levels': [
     {'file': '/media/videos/20091101_aden.mp4','type': 'video/mp4' },
     {'file': '/media/videos/20080518_rune.webm', 'type': 'video/webm' },
    ],
    'modes': [
     {'type': 'html5'},
     {'type': 'flash', src: '/media/mediaplayer/player.swf'},
     {'type': 'download'}
    ]
  });
</script>
<ul>
	<li><a href="#" onclick="jwplayer().play();">Toggle the playback</a></li>
	<li><a href="#" onclick="jwplayer().setMute();">Toggle the audio</a></li>
	<li><a href="#" onclick="jwplayer().stop();">Stop playback</a></li>
</ul>

※当初は、IE9ではHTML5は再生不可、Firefoxでは問題なしでしたが現在はどちらのブラウザでも再生可能です。
※IE9はMP4、FireFoxはWebmで再生されます。
※IE9でMP4の再生不可はWebサーバのMIME-TYPEがvideo/mpeg4となっていたのをvideo/mp4に変更して改善しました。
※jwplayer用のplayback、Muteとstopの3種類のコントロールを試験的に追加していますが特に意味はありません。

動画を再生するには、videoタグをサポートしたブラウザもしくはAdobe Flash Playerが必要です。

 

ColorBox+YouTube

ColorBoxでYouTubeのPlayerを表示して再生します。(iframe)
※当サイトはColorBoxライブラリとDrupal寄贈モジュールであるcolorboxモジュールを別途導入してあります。

ソースコードは以下の通りです。

<a class="colorbox-load" href="http://www.youtube.com/embed/8AZvUhubDgQ?fs=1&amp;width=640&amp;height=480&amp;iframe=true&amp;rel=0"><img src="http://img.youtube.com/vi/8AZvUhubDgQ/0.jpg"></a><br>

※このソースコードはDrupalのColorboxモジュールのReadMeを参考に作成しています。
※ポイントはcolorbox-loadとiframe=trueです。


 

ColorBox+HTML5

ColorBoxでHTML5video Playerを表示して再生しています。
※当サイトはColorBoxライブラリとDrupal寄贈モジュールであるcolorboxモジュールを別途導入してあります。

ソースコードは以下の通りです。

<div style='display:none'>
<video id=html5_player poster="/media/images/20080518_rune.jpg" width="640" height="512" controls autobuffer><source src="/media/videos/20091101_aden.mp4"><source src="/media/videos/20080518_rune.webm"> 動画を再生するには、videoタグをサポートしたブラウザが必要です。 </video>
</div>
<a class="colorbox-inline" href="?width=640&amp;height=512&amp;inline=true#html5_player"><img class="imagecache-body_middle" src="/media/imagecache/body_middle/images/20091101_aden.png"> </a>

※このソースコードはDrupalのColorboxモジュールのReadMeを参考に作成しています。
※HTML5 videoタグの場合、Playerの形や大きさはブラウザー依存のようでColorBoxの表示サイズにうまく収まらずにスクロースバーが表示されるケースがあります。

 

ColorBox+JWPlayer

ColorBoxでJWPlayerを表示してローカルの動画を再生しています。
※当サイトはColorBoxライブラリとDrupal寄贈モジュールであるcolorboxモジュールを別途導入してあります。

【iframe】

colorbox-loadとiframe=trueを使用してiframeでJWplayerを表示しています。

ソースコードは以下の通りです。

<a class="colorbox-load" href="/media/mediaplayer/player.swf?file=/media/videos/20091101_aden.mp4&amp;image=/media/images/20091101_aden.png&amp;backcolor=000000&amp;frontcolor=666666&amp;lightcolor=666666&amp;screencolor=000000&amp;iframe=true&amp;width=640&amp;height=512&amp;rel=0&amp;usefullscreen=true"><img class="imagecache-body_middle" src="/media/imagecache/body_middle/images/20091101_aden.png"></a>

※JWplayerのコントロールバーなどの色を変えていますが特に意味はありません。
※FullScreenボタンが使用できません。
※ColorBoxを閉じるとIE9ではアクセス拒否のエラーが発生します。

 

【inline】(HTML5対応)

colorbox-inlineとinline=trueを使用してinlineでJWplayerを表示しています。

ソースコードは以下の通りです。

<div style='display:none'>
<script type="text/javascript" src="/media/mediaplayer/jwplayer.js"></script>
<div id="mediaplayer2" >動画を再生するには、videoタグをサポートしたブラウザもしくはAdobe Flash Playerが必要です。</div>
<script type="text/javascript">
  jwplayer('mediaplayer2').setup({
    'id': 'playerID',
    'width': '640',
    'height': '512',
    'image': '/media/images/20091101_aden.png',
    'levels': [
     {'file': '/media/videos/20091101_aden.mp4','type': 'video/mp4' },
     {'file': '/media/videos/20080518_rune.webm', 'type': 'video/webm' },
    ],
    'modes': [
     {'type': 'html5'},
     {'type': 'flash', src: '/media/mediaplayer/player.swf'},
     {'type': 'download'}
    ]
  });
</script>
</div>
<a class="colorbox-inline" href="?width=640&amp;height=512&amp;inline=true#mediaplayer2"><img class="imagecache-body_middle" src="/media/imagecache/body_middle/images/20091101_aden.png"> </a>

※IE9では以前のThickBoxのときと同じように再度再生すると真っ暗な画面になってしまいます。
※原因は前回の状態が継続したままになっており同期がとれなくなったためのようです。

動画を再生するには、videoタグをサポートしたブラウザもしくはAdobe Flash Playerが必要です。

 

まとめ

これらで何がしていかというと、現状の動画ページのようにFlash Playerを1つ設置してその周囲に動画ファイルのサムネイル画像を配置する方法では操作性が悪い点を改善しようと考えています。
この改善のついでに今後のHTML5 videoをある程度見越したものにしようと思っているわけです。
どれもとりあえずはうまくいっているようですが、問題は次の2点です。

問題点1)HTML5の場合、ブラウザに依存して表示画面が崩れる

問題点2)HTML5のビデオフォーマットに関してはブラウザによって対応状況が異なる

 

補足

IE9以降をご使用の場合は互換性表示の設定によってHTML5対応(IE9標準)/未対応(IE8/IE7)の切り替えが可能になります。

この互換表示機能を切り替えることでどう変わるか簡易的にお試しいただけると思います。