canvas.js

  1. window.onload=function() {
  2.     var canvas = document.getElementById('canvas');
  3.  
  4.     var ctx= canvas.getContext('2d');
  5.  
  6.      var img=document.getElementsByTagName('img')[0];
  7.      ctx.drawImage(img,0,0,200,200);
  8.      var video=document.getElementById('video');
  9.      canvas.onclick=function() {
  10.          video.play();
  11.          video.addEventListener("play", function () {
  12.                setInterval(function() {
  13.                    ctx.drawImage(video,0,0,200,200);
  14.  
  15.                },20);
  16.          });
  17.      }
  18. };

　　canvas.html

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>实例</title>
  6.     <script  type="text/javascript"  src="canvas1.js"></script>
  7.     <style>
  8.         canvas {
  9.             background: #eeeeee;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14. <canvas id="canvas" width="500" height="500"></canvas>
  15.  
  16. <img  src="不二.jpg"  hidden >
  17. <video  src="陈奕迅 - 陪你度过漫长岁月.mp4"  id="video" hidden>
  18. </video>
  19. </body>
  20. </html>

　　效果：

2017-09-11  13:21:15

canvas 点击图片播放视频的更多相关文章

  1. canvas前端压缩图片和视频首屏缩略图并上传到服务器

    图片: var img = document.createElement('img') img.src = window.URL.createObjectURL(fileObj.file) // 加载 ...

  2. 运用surfaceView与MediaPlayer实现播放视频的功能

    该程序运用了surfaceView与MediaPlayer结合,实现播放视频,surfaceView详情请见 SurfaceView的使用 使用了第三方包Volly里面的方法StringQueue下载 ...

  3. 在Vue项目使用quill-editor带样式编辑器（更改插入图片和视频）

    vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ...

  4. 利用PyQt GUI显示图片、实时播放视频

    ---作者吴疆,未经允许,严禁转载,违权必究--- ---欢迎指正,需要源码和文件可站内私信联系--- -----------点击此处链接至博客园原文----------- 功能说明:PyQt界面程序 ...

  5. [Unity3D][Vuforia][IOS]vuforia在unity3d中添加自己的动态模型，识别自己的图片，添加GUI，播放视频

    使用环境 unity3D 5 pro vuforia 4 ios 8.1(6.1) xcode 6.1(6.2) 1.新建unity3d工程,添加vuforia 4.0的工程包 Hierarchy中 ...

  6. 可进可退，jQuery图片、视频、flash播放插件prettyPhoto使用记录

    一.prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频.flash.YouTube.iframe和aja ...

  7. MediaPlayer简单使用,绑定surfaceView实现播放视频的功能

    转载自 Android MediaPlayer使用方法简单介绍 播放音频 android中播放音频可以使用MediaPlayer类来实现,一下是它的一些方法: 方法名 功能描述 setDataSour ...

  8. day10 多媒体(文字 图片 音频 视频)

    1计算机表示图形的几种方式     bmp:以高质量保存     用于计算机     jpg:以良好的质量保存    用于计算机或者网络     png:以高质量保存     图片大小的计算公式:图片 ...

  9. vivo 手机 video 标签无法播放视频解决方案

    1. 针对 vivo 手机单独设置 video 标签加上 controls 此时video 可以点击播放,但是有进度条存在. 2. 将 video 隐藏,用一张图片定位在在 video 所在的位置,点 ...

随机推荐

  1. layer.js插件

    官方网址: http://layer.layui.com/

  2. [CF959E]Mahmoud and Ehab and the xor-MST题解

    解法 又是一道结论题? 我的做法比较奇怪且没有证明 #include <cstdio> #include <cmath> #define ll long long int ma ...

  3. BaseFragment 基类代码

    public abstract class BaseFragment extends Fragment implements IBaseView { private List<BasePrese ...

  4. 【easyui-combobox】下拉菜单自动补全功能，Ajax获取远程数据源

    这个是针对easyUI的下拉菜单使用的,Ajax获取远程数据源 HTML 页面 <input id="uname" name="uname" class= ...

  5. CF E2 - Daleks' Invasion (medium) （LCA求两点树上路径上的最大边权）

    http://codeforces.com/contest/1184/problem/E2 题意:给出一副图,首先求出这幅图的最小生成树 , 然后修改这幅图上不属于最小生成树的边权,使得修改后的图在求 ...

  6. 10个最容易犯的Python开发错误

    10个最容易犯的Python开发错误 转载 2017年09月25日 16:54:36 标签: python / 大数据 / 大讲台   Python是一门简单易学的编程语言,语法简洁而清晰,并且拥有丰 ...

  7. Note：目录2

    ylbtech-Note:目录2 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech ...

  8. swiper在vue中的用法

    首先通过npm i vue-awesome-swiper --save 来在vue中下载插件 然后再main.js中引入 require('swiper/dist/css/swiper.css')im ...

  9. 【转载】阿里入局，独角兽估值30亿美金，谈谈RPA是什么

    缩短法定工作时间,已成国际劳动立法趋势,全球政府都曾面对这样的议题,过往企业IT也在思考这件事,开发出更好的软件系统帮助员工,就是普遍作法,这也已经行之有年,而现阶段最有效的作法,则是要用AI来提供帮 ...

  10. iview 表格 某一列中设置radio

    在iview 表格 某一列中设置radio,说白了还是要在render中添加,方法为: { title: '业务参数设置', // key: 'pyCode', align: 'center', re ...