canvas 点击图片播放视频

canvas.js

window.onload=function() {
    var canvas = document.getElementById('canvas');

    var ctx= canvas.getContext('2d');

    
     var img=document.getElementsByTagName('img')[0];
     ctx.drawImage(img,0,0,200,200);
     var video=document.getElementById('video');
     canvas.onclick=function() {
         video.play();
         video.addEventListener("play", function () {
               setInterval(function() {
                   ctx.drawImage(video,0,0,200,200);

               },20);
         });
     }
};

　　canvas.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>实例</title>
    <script  type="text/javascript"  src="canvas1.js"></script>
    <style>
        canvas {
            background: #eeeeee;
        }
    </style>
</head>
<body>
<canvas ></canvas>

<img  src="不二.jpg"  hidden >
<video  src="陈奕迅 - 陪你度过漫长岁月.mp4"   hidden>
</video>
</body>
</html>

　　效果：

canvas 点击图片播放视频

2017-09-11 13:21:15