<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频播放</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
border: 1px #f00 solid;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<!-- <video
src="./images/douyin1.mp4"
controls
width="600"
height="400"
></video> -->
<canvas id="myCanvas" width="600" height="400"></canvas>
<button id="play">播放视频</button>
</body>
</html>
<script>
/** @type {HTMLCanvasElement} **/
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
//获取 video 标签对象
let video = document.createElement('video');
let play = document.getElementById('play');
video.src = './images/douyin1.mp4';
//监听视频可以播放 canplay 事件
video.addEventListener('canplay', function() {
play.onclick = function(e) {
video.play();
// ctx.drawImage(video, 0, 0, 600, 400);
playCanvas();
}
});
function playCanvas(){
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
window.requestAnimationFrame(playCanvas);
}
</script>
09-26
442
09-02