4.11.2_在Canvas中播放視頻
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在Canvas中播放視頻</title>
<style>
body{
background: #eee;
}
#canvas{
background: #fff;
cursor: pointer;
margin-left: 20px;
margin-top: 20px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
#video{
display: none;
}
</style>
</head>
<body>
<video id="video" poster>
<source src="video/mov_bbb.mp4"></source>
<source src="video/mov_bbb.ogg"></source>
</video>
<canvas id="canvas" width="720" height="405"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
video.oncanplay = function(e){
video.play();
window.requestAnimationFrame(animate);
}
function animate(){
if(!video.ended){
context.drawImage(video,0,0,canvas.width,canvas.height);
window.requestAnimationFrame(animate);
}
}
</script>
</html>
