1.Canvas适用场景：Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制；
2.SVG适用场景：SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景；
canvas简单粗暴载入视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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');
// 每20毫秒画一次
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);
// 将视频暂停，然后观察canvas里面的效果
setTimeout(function(){
v.pause();
console.log('视频已经暂停');
},4000);
// 将视频播放，然后观察canvas里面的效果
setTimeout(function(){
v.play();
console.log('视频已经播放');
},7000);
</script>