H5 canvas如何載入視訊
阿新 • • 發佈：2019-02-18
Canvas可以載入圖片，那麼Canvas 也可以載入視訊。
Canvas載入視訊和圖片是一樣的，使用drawImage，區別就是給一個定
時器不停的抓取每幀的畫面，放入Canvas畫布裡面。
示例1 ：
附上demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi">
<meta charset 示例2 ：setInterval
附上程式碼：
<!DOCTYPE html>
<html>
<body>
<p>要使用的視訊：</p>
<video id="video1" controls width="270" autoplay src="sintel.mp4"></video>
<p>畫布（每 20 毫秒，程式碼就會繪製視訊的當前幀）：</p>
<canvas id="myCanvas" width="270" height="135"></canvas>
</body>
<script>
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play', function() {
var i = window.setInterval(function() {
ctx.drawImage(v, 0, 0, 270, 135)
}, 20);
}, false);
</script>
</html>示例3 ：requestAnimationFrame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi" />
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
<script>
!(function(doc) {
var cont = doc.getElementById("container");
var cw = window.innerWidth;
var ch = window.innerHeight;
var canvas = document.createElement('canvas');
canvas.width = cw;
canvas.height = ch;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
cont.appendChild(canvas);
var cont2D = canvas.getContext("2d");
var video = document.createElement('video');
video.preload = "auto";
video.volume = 0.3;
video.setAttribute('x-webkit-airplay', true);
video.setAttribute('webkit-playsinline', true);
video.setAttribute('webkit-playsinline', 'webkit-playsinline');
video.src = 'video/nigg2.mp4';
video.autoplay = "autoplay"; //是自動播放
video.addEventListener("play", function() {
draw(this, canvas, cont2D, cw, ch);
}, false)
function cerateCanvas(w, h) {
var cr = doc.createElement("canvas");
cr.width = w;
cr.height = h;
return cr;
}
function draw(v, c, c2, w, h) {
if(v.paused || v.ended) {
cancelAnimationFrame(stop);
return false;
}
c2.drawImage(v, 0, 0, w, h);
var stop = requestAnimationFrame(function() {
draw(v, c, c2, w, h);
});
}
})(document)
</script>
</html>