プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
HTML5、video関連の動作確認をローカル環境でする際の注意点
いやー、HTML5のvideo関連で地味にハマりました(-A-)。

結論から言うと、ローカル環境でちまちま動かしている場合
video関連の一部イベントが発生しないみたいです。

デスクトップにHTMLファイルを作ってちまちま遊んでいたのですが
スライダーで動画位置を移動するコードが期待通りに動かなくてですね。
ちょっと涙目になったのです。

ちなみにこんなコードφ(--)

<!DOCTYPE html>
<html>
<haed>
<script type="text/javascript">

    function init(){
        var video = document.querySelector("#video1");
        video.addEventListener('loadedmetadata', function(){
            var dur = video.duration;
            document.querySelector("#msg1").value = dur;
            document.querySelector("#range1").max = dur;
        }, false);
    }

    function rangeMove(e){
        var video = document.querySelector("#video1");
        video.currentTime = document.querySelector("#range1").value;
        document.querySelector("#text1").value = document.querySelector("#video1").currentTime;
    }

</script>
</head>
<body onload="init();">
    <form>
        <video id="video1" src="aaa.mp4" controls width="320px" height="240px"></video><br>
        <input type="range" id="range1" min="0" max="0" onchange="rangeMove();" /><br>
        <input type="text" id="msg1" /><br>
        <input type="text" id="text1" /><br>
    </form>
</body>
</html>

ほんで試しにサーバ上に配置したら動きました(ノ∀`)

まさか(-A-;

と思ったのでこんなコードを動かしてみたところφ(--)

<!DOCTYPE html>
<html>
<haed>
<script type="text/javascript">
    function init() {
        var video = document.querySelector("#video1");

        ["loadstart",
        "progress",
        "suspend",
        "load",
        "abort",
        "error",
        "emptied",
        "stalled",
        "play",
        "pause",
        "loadedmetadata",
        "loadeddata",
        "waiting",
        "playing",
        "canplay",
        "canplaythrough",
        "seeking",
        "seeked",
        "timeupdate",
        "ended",
        "ratechange",
        "durationchange",
        "volumechange"].forEach(function(en) {
                video.addEventListener(en, function() {
                    document.querySelector("#msg1").innerHTML += en;
                    document.querySelector("#msg1").innerHTML += "<br>";
                }, true);
            });
    }

</script>
</head>
<body onload="init();">
    <form>
        <video id="video1" src="aaa.mp4" controls width="320px" height="240px"></video><br>
        <p id="msg1" /></p>
    </form>
</body>
</html>

ローカル環境での結果はこんなことにφ(--)

play
playing
timeupdate
timeupdate
timeupdate
timeupdate
timeupdate
pause

ちなみに画面ロード時には何もイベントが発生せず
記録された動作は動画の開始/終了で発生したイベントです。

一方同じことをサーバにあげてやってみるとこんな結果φ(--)

progress
suspend
progress
suspend
 ・
 ・
 ・
progress
suspend
progress
suspend
durationchange
loadedmetadata
loadeddata
canplay
canplaythrough
timeupdate
play
playing
timeupdate
timeupdate
progress
suspend
progress
suspend
timeupdate
 ・
 ・
 ・
suspend
timeupdate
pause
progress
progress
progress
 ・
 ・
 ・

サーバに上げると「progress」と「suspend」が大張り切り。
「loadedmetadata」なんかもサーバに上げないと登場してないですね。

もしかしたら私の環境(Windows7+Chrome)のせいかもしれませんが
まぁそんなことにもなりえますよっと。

と言う訳でvideo関連の動作確認をする際は
多少手間でもサーバに上げてから行った方が良いみたいです。
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事