やること

ブラウザで、ローカルの mp4 ファイルを選択して、再生、停止、再生速度の変更などができる簡易プレイヤーを作ります。というか、それをベースに何か作りたいと思ったとき用のメモ。

参考

クライアント側だけでローカルの動画を再生しつつ任意のタイミングでサムネイル画像を生成する

コード

下記で実際に動いた状態を見られます。
ー https://royalcrab.github.io/mp4_local.html

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
    <video id="video" height="480" controls></video><br/>
    royalcrab@超Lチカ団 (2020)<br/>
    <input type="file" id="filename" value="ファイル読み込み"/><br/>
    <input type="button" value="再生" onClick="play()"/>
    <input type="button" value="停止" onClick="pause()"/><br/>
    <input type="button" value="速く" onClick="changeSpeed(0.1)"/>
    <input type="button" value="遅く" onClick="changeSpeed(-0.1)"/><br/>
    再生位置  :<span id="position">-</span><br/>
    再生速度  : <span id="speed">1.0</span><br/>
    ファイル名 :<span id="filename">none</span><br/>

    <script>

    function init(){
        var f = document.getElementById("filename");
        f.addEventListener( "change", function (event) {
            var URL = URL || webkitURL;
            var file = event.target.files[0];
            document.querySelector('video').src = URL.createObjectURL(file);
            document.getElementById('filename').innerHTML = document.querySelector('video').src;
        }, false );

        var v = document.getElementById("video");
        v.addEventListener("timeupdate", function(){
            document.getElementById("position").innerHTML = v.currentTime;
            document.getElementById("speed").innerHTML = v.playbackRate.toFixed(1);
        }, false);
    }

    function play() {
        var v = document.getElementById("video");
        if  ( v == null || v.src == null ) return;
        v.play();
    }

    function pause() {
        var v = document.getElementById("video");
        if  ( v == null || v.src == null ) return;
        v.pause();
    }

    function changeSpeed( val ) {
        var v = document.getElementById("video");
        if  ( v == null || v.src == null ) return;
        if ( v.playbackRate + val < 0.1 ) v.playbackRate = 0.1;
        else v.playbackRate += val;
    }

    init();
    </script>
</body>
</html>

input の type を file にして、その input にファイル読み込み function を addListener する。
Blob URLs は iOS の chrome では動かないかも。他ではだいたい動きそう。対応状況: https://caniuse.com/#feat=bloburls

ブラウザでローカルの mp4 を再生するプレイヤーを video タグで作る

やること

参考

コード