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 点击图片播放视频的更多相关文章
- canvas前端压缩图片和视频首屏缩略图并上传到服务器
图片: var img = document.createElement('img') img.src = window.URL.createObjectURL(fileObj.file) // 加载 ...
- 运用surfaceView与MediaPlayer实现播放视频的功能
该程序运用了surfaceView与MediaPlayer结合,实现播放视频,surfaceView详情请见 SurfaceView的使用 使用了第三方包Volly里面的方法StringQueue下载 ...
- 在Vue项目使用quill-editor带样式编辑器（更改插入图片和视频）
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ...
- 利用PyQt GUI显示图片、实时播放视频
---作者吴疆,未经允许,严禁转载,违权必究--- ---欢迎指正,需要源码和文件可站内私信联系--- -----------点击此处链接至博客园原文----------- 功能说明:PyQt界面程序 ...
- [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中 ...
- 可进可退，jQuery图片、视频、flash播放插件prettyPhoto使用记录
一.prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频.flash.YouTube.iframe和aja ...
- MediaPlayer简单使用,绑定surfaceView实现播放视频的功能
转载自 Android MediaPlayer使用方法简单介绍 播放音频 android中播放音频可以使用MediaPlayer类来实现,一下是它的一些方法: 方法名 功能描述 setDataSour ...
- day10 多媒体(文字 图片 音频 视频)
1计算机表示图形的几种方式 bmp:以高质量保存 用于计算机 jpg:以良好的质量保存 用于计算机或者网络 png:以高质量保存 图片大小的计算公式:图片 ...
- vivo 手机 video 标签无法播放视频解决方案
1. 针对 vivo 手机单独设置 video 标签加上 controls 此时video 可以点击播放,但是有进度条存在. 2. 将 video 隐藏,用一张图片定位在在 video 所在的位置,点 ...
随机推荐
- php current()函数 语法
php current()函数 语法 作用:返回数组中的当前元素的值.直线电机工作原理 语法:current(array) 参数: 参数 描述 array 必需.规定要使用的数组. 说明:返回数组中的 ...
- JDK1.8 HashMap源码
序言 触摸本质才能永垂不朽 HashMap底层是基于散列算法实现,散列算法分为散列再探测和拉链式.HashMap 则使用了拉链式的散列算法,并在JDK 1.8中引入了红黑树优化过长的链表.数据结构示意 ...
- 秒杀Servlce接口设计
秒杀Servlce接口设计 1.创建service包,创建SecKillServlce业务接口 SecKillServlce.Java package org.secKill.service;/** ...
- [CSP-S模拟测试]:太阳神（莫比乌斯反演）
题目描述 太阳神拉很喜欢最小公倍数,有一天他想到了一个关于最小公倍数的题目.求满足如下条件的数对$(a,b)$对数:$a,b$均为正整数且$a,b\leqslant n$而$lcm(a,b)>n ...
- 夯实Java基础系列7：Java 代码块和执行顺序
本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...
- 『转』一千行MySQL学习笔记
/* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...
- Js获取屏幕宽度、高度
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- CSU 1551 Longest Increasing Subsequence Again（树状数组 或者 LIS变形）
题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1551 升级版:Uva 1471 题意: 让你求删除一段连续的子序列之后的LIS. 题 ...
- matlab: undocumented sprintfc
今天本想找一个类似于 R 中 paste 的 matlab 函数, 结果在 stackoverflow 上找到一个叫 sprintfc 的函数 (http://stackoverflow.com/qu ...
- 【OpenCV】 在CentOS下搭建OpenCV开发环境
最近开始入模式识别的坑,自然被迫上OpenCV了. 在多次尝试给VS2015扩展Windows 10 SDK无果后(不要问我为啥..VS2015开发C++的标准库全给扔到这个SDK里了,打包在VS安装 ...