作者：kas8288408 | 来源：互联网 | 2023-05-18 14:36
1.Canvas适用场景：Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制；2.SVG适用场景：SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景；
1.Canvas适用场景：Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制；
2.SVG适用场景：SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景；
canvas简单粗暴载入视频
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title>
head>
<body>
<video id="video1" width="270" autoplay src="./03000801005426CBEA7D1F0192150015E9D223-5329-35DA-F92F-CA9ADB1D7F4A.mp4">video>
<canvas id="myCanvas" width="270" height="135">canvas>
body>
html>
<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); console.log(v.currentTime); if(v.ended){ clearInterval(i); } },20); },false); setTimeout(function(){ v.pause(); console.log('视频已经暂停'); },4000); setTimeout(function(){ v.play(); console.log('视频已经播放'); },7000); script>
京公网安备 11010802041100号