You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.9 KiB
67 lines
1.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<body>
|
|
|
|
<p>要使用的视频：</p>
|
|
|
|
<video id="video1" controls width="270" autoplay>
|
|
<source src="mov_bbb.mp4" type='video/mp4'>
|
|
</video>
|
|
|
|
<p>画布（每 20 毫秒，代码就会绘制视频的当前帧）：</p>
|
|
|
|
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
|
|
Your browser does not support the HTML5 canvas tag.
|
|
</canvas>
|
|
|
|
<canvas id="ccccc" width="270" height="135" style="border:1px solid #d3d3d3;">
|
|
Your browser does not support the HTML5 canvas tag.
|
|
</canvas>
|
|
|
|
|
|
<img id="img" src="./g.gif" alt="">
|
|
|
|
<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);
|
|
// v.addEventListener('pause', function() {
|
|
// window.clearInterval(i);
|
|
// }, false);
|
|
// v.addEventListener('ended', function() {
|
|
// clearInterval(i);
|
|
// }, false);
|
|
|
|
// let xhr = new XMLHttpRequest();
|
|
// xhr.open('get', './g.gif');
|
|
// xhr.setRequestHeader("Content-Type", "image/gif");
|
|
// xhr.send();
|
|
// xhr.onreadystatechange = function() {
|
|
// if (xhr.readyState === 4) {
|
|
// if (xhr.status === 200) {
|
|
// console.log('response', xhr.response);
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
const img = document.getElementById("img");
|
|
const ccc = document.getElementById("ccccc");
|
|
const ctx22 = ccc.getContext('2d');
|
|
render();
|
|
|
|
function render() {
|
|
ctx22.drawImage(img, 0, 0);
|
|
window.requestAnimationFrame(render);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |