videoタグで動画検証。
こんにちは、
制作部の伊藤です。
少しHTML5のvideoタグについて検証したので纏めます。
HTML5では、動画再生する為にタグが追加されています。
このタグを使用することで、プラグインをインストールしてもらうことなく、
HTML側から簡単に動画を扱えるようになります。
細かい属性などについてはこちらをご確認下さい。
以下のように各端末で読み込まれる動画を上から並べていきます。
<video id="video" width="300" height="200" controls="controls" onclick="this.play()" preload="metadata"> <source src="test.webm" type="video/webm"> <!-- OGG/WebM 陣営向けの動画 --> <source src="test.ogv" type="video/ogg" media="all"> <!-- MPEG-4 陣営向けの動画 --> <source src="test.mp4" type="video/mp4" media="all"> </video>
以下の指定で動画が再生されるはずが、落とし穴が二つ！
まず、GALAXYS で再生が出来ない！
GALAXYSは＜video＞タグを設置するだけでは再生できないようです。
Javascriptで以下を指定し再生する必要があります。
// JavaScript Document
$(function(){
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
});
その2！
まさかのandroid 4.0 以降はストリーミング再生が不安定。
android 2.0.× ～ 2.3.× などのバージョンは端末の動画プレイヤーを立ち上げるので
読み込む時間が多少掛りますがみる事が出来ます。
android 4.0 以上はストリーミング再生で重い動画だと
音声だけが再生されたり、固まったり不安定です。
1MB以下の短い15秒位の動画でやっと再生出来ました。
再生したいのは約1.5MBの1分程の動画です。
検証端末は
・GALAXYS android 2.3.6
・GALAXYS3 android 4.0
・iPhone4S、5
・他android端末
です。
まだまだ動画系はvideo タグでOK！というわけにはいかないようです・・・。
もしかしたらjsの制御で改善出来るかもしれませんが調べた限りでは無さそうでした。
android 4.0 も端末の動画プレイヤーで再生出来れば
まだストレスを感じずに再生出来るのではないかと思います。
なんとかならないかな― android
