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. hadoop平台搭建

    前言 这是小的第一次搭建hadoop平台,写下这篇博客有以下几个目的(ps:本博只记录在linux系统下搭建hadoop的步骤,如果需要了解在其他平台上搭建hadoop的步骤,还请移步): 1.希望大 ...

  2. 元素隐藏visibility：hidden与元素消失display：none的区别

    visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏). 当visi ...

  3. 为 PhpStorm 配置 Xdebug 来调试代码

    当项目越来越复杂,排错就越发困难. 你以为代码是这么运行的,但就是有未想到的功能导致流程变得不可捉摸. 此时我们需要调试啊调试... PhpStorm 是一款优秀的 PHP IDE,排除其 Java ...

  4. 腾讯云服务器centos通过yum安装mysql数据库

    安装mysql有两种: 1-可以使用yum安装, 2-可以自己下载安装包安装mysql, 腾讯云的centos系统自带了yum,所以用yum安装方便点 安装步骤 1-查看yum源中是否有mysql y ...

  5. php面试专题---MySQL分表

    php面试专题---MySQL分表 一.总结 一句话总结: 分库分表要数据达到一定的量级才用,这样才有效率,不然利不一定大于弊,可能会增加一次I/O消耗 1.分库分表的使用量级是多少? 单表行数超过 ...

  6. Advanced search keywords

    Advanced search options Find what you're looking for in less time. Use the following symbols to quic ...

  7. 如何修改运行中的docker容器的端口映射

    在docker run创建并运行容器的时候,可以通过-p指定端口映射规则.但是,我们经常会遇到刚开始忘记设置端口映射或者设置错了需要修改.当docker start运行容器后并没有提供一个-p选项或设 ...

  8. 为什么每次打出的包都是Release版本呢？

    参考了:xcodebuild命令 https://www.cnblogs.com/liuluoxing/p/8622108.html 重新打个包,验证一下想法

  9. Entity Framework Code First （五）Fluent API - 配置关系 转载 https://www.cnblogs.com/panchunting/p/entity-framework-code-first-fluent-api-configuring-relationships.html

    上一篇文章我们讲解了如何用 Fluent API 来配置/映射属性和类型,本文将把重点放在其是如何配置关系的. 文中所使用代码如下 public class Student { public int ...

  10. Vue过渡：JavaScript钩子

    一 App.vue <template> <div id="app"> <button @click="show = !show" ...