canvas 点击图片播放视频

Posted 1点

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 id="canvas" width="500" height="500"></canvas>

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

　　效果：

2017-09-11  13:21:15

 

以上是关于canvas 点击图片播放视频的主要内容，如果未能解决你的问题，请参考以下文章

h5 canvas截取视频第一帧

如何把视频片段做成动态图片

播放随机声音而不重复

如何利用ffmpeg将一小段视频截取成图片

Android 7 上的 VideoView 错误

在 HTML Canvas 上播放视频