やること
ブラウザで、ローカルの 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