ブラウザの違いでめんどいことは多いがなれればそれほどでもないかも。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="cnvs" width="640" height="480"></canvas>
<input id="play-or-pause" type="button" value="loading">
<script>
(function() {
var canvas = document.getElementById("cnvs");
var ctx = canvas.getContext("2d");
var button = document.getElementById("play-or-pause");
var vid = document.createElement("video");
vid.autoplay = true;
vid.loop = true;
if (vid.canPlayType("video/mp4").length === 0) {
return false;
}
vid.addEventListener("loadeddata", function(){
vid.pause();
draw();
button.value = "play";
}, false);
vid.src = "susie.mp4";
function draw() {
for (var dy = -118; dy < canvas.height; dy += 144) {
for (var dx = -160; dx < canvas.width; dx += 192) {
ctx.drawImage(vid, dx, dy);
}
}
}
button.onclick = function() {
var intervalId = null;
if (button.value === "pause") {
clearInterval(intervalId);
vid.pause();
button.value = "play";
} else if (button.value === "play"){
intervalId = setInterval(draw, 1000 / 30);
vid.play();
button.value = "pause";
}
};
})();
</script>
</body>
</html>
前回と同じくボタンで再生/一時停止。
手元の環境(Windows10,64bit)で確認したところ、Chrome/Firefoxではこのページを開いた場合、0フレームが表示された状態でpauseがかかるが、Edge/IE11では最初のフレームは表示されず真っ黒(Edge)か透明(IE11)である。
Edgeはwebkitと挙動が違えばバグらしいのでEdgeのはバグなんだろう(多分)。
追記：
スマホ(Android)のChromeで見てみるとEdgeと同じ挙動になった。
ってことはバグにはならない可能性のほうが高いのかな？
ここらへんはっきりさせて欲しい。
