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 点击图片播放视频的更多相关文章

  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. redis学习 --Sorted Set

    一.概述: Sorted Set(有序集合)和Set类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted Set中的每一个成员都会有一个分数(sc ...

  2. 2、投资之基金 - IT人思维之投资

    笔者曾经对基金进行投资,但是当时对基金不是很了解,只是为了投资而去投资.现在,笔者对基金的投资有了更深入的了解认识,所以就有了本文. 基金投资在国内还是挺流行的,虽然其是从国外引进来的概念经验,但是国 ...

  3. digits 2

    digits 2 震惊了== 我还交的表,发现直接输出n个n就行=== #include<bits/stdc++.h> using namespace std; ]={ ", & ...

  4. [CSP-S模拟测试]:Dinner（二分）

    题目描述 清儿今天请好朋友们吃饭,一共$N$个人坐在坐在圆桌旁.吃饭的第一步当然是点餐了.服务员拿来了$M$份菜单.第$i$个人阅读菜单并点出自己喜欢的菜需要花费时间$T_i$.当一个人点完菜之后,就 ...

  5. LNMP环境搭建最好用的两种方法（亲测）

    经历了一个PHP服务器项目,手动编译部署PHP,Swoole环境太让人郁闷了,所以尝试过两种不错的方法,分享出来方便同样经历痛苦的coder. 第一种方式: 安装LNMP按照这里的步骤执行,网址戳我 ...

  6. 术语-IT术语-全栈工程师：全栈工程师

    ylbtech-术语-IT术语-全栈工程师:全栈工程师 全栈工程师是指掌握多种技能,并能利用多种技能独立完成产品的人. 1.返回顶部 1. 中文名:全栈工程师 外文名:Full Stack engin ...

  7. 关于linq中的dbml文件中的对象加s去s的问题

    点击工具->选项->数据库工具->O/R Designer ,右面有个启用,如果是true

  8. Java常用工具——java字符串

    一.String常用字符串 package com.imooc.string; public class StringDemo { public static void main(String[] a ...

  9. BurpSuite从下载安装到配置使用

    为解决一个XSS安全问题,第一次使用BurpSuite,记录一下下载安装到配置使用的过程,希望能对第一次使用该工具的朋友有所帮助. 一.下载及安装 直接百度下载破解版,我下的版本是burpsuite_ ...

  10. CEF3 命令行 CefCommandLine 所有选项 与 开发中使用的测试网址

    转自: https://blog.csdn.net/xiezhongyuan07/article/details/86640413 1.cef3 commandLine设置 在cef3开发过程中,在O ...