<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>W3CSchool Demo</title>

</head>

<body>

    <video id="video1" controls="" width="270" style="margin-top:15px;">

          <source src="demo/video1.mp4" type="video/mp4">

          <!-- <source src="/example/html5/mov_bbb.ogg" type="video/ogg">

          <source src="/example/html5/mov_bbb.webm" type="video/webm"> -->

    </video>

    <canvas id="myCanvas4" width="270" height="135" style="border:1px solid #d3d3d3; margin-top:15px;">

        Your browser does not support the HTML5 canvas tag.

    </canvas>

    <script>

        var v=document.getElementById("video1");

        var c=document.getElementById("myCanvas4");

        ctx=c.getContext('2d');

        v.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false);

        v.addEventListener('pause',function() {window.clearInterval(i);},false);

        v.addEventListener('ended',function() {clearInterval(i);},false);

    </script>

</body>

</html>

参考W3CSchool:http://www.w3school.com.cn/tags/canvas_drawimage.asp

Html视频播放同时获取当前帧下的图片的更多相关文章

  1. android中如何获取指定目录下的图片

    需要对指定目录的图片文件进行列表,借鉴了网上的方法,发现列表出来是所有的文件,这样用起来很不方便,在这里也没找到解决的办法,经过自己的进一步研究终于搞定,发上来给有用的同学.用下面这种方式能实现查询实 ...

  2. 获取Assets目录下的图片显示并上传

    package com.jingle.getlocal; import java.io.ByteArrayOutputStream; import java.io.InputStream; impor ...

  3. 获取Assets目录下的图片并显示

    package com.jingle.getlocal; import java.io.InputStream; import android.app.Activity; import android ...

  4. 如何获取drawable目录下的图片绝对路径

    Uri uri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + r.getResourcePackage ...

  5. 微信小程序云开发获取文件夹下所有文件

    上周一个高中同学让我帮他做个图片展示的公众号,因为一直在加班的原因,所以一时忘了,昨晚想起来就赶紧加班加点的帮他弄了下,遇到了个问题,记录一下. 他的需求是要有个后台给他上传图片并且将图片归类,前端公 ...

  6. js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性

    js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.wh ...

  7. 一个获取指定目录下一定格式的文件名称和文件修改时间并保存为文件的python脚本

    摘自:http://blog.csdn.net/forandever/article/details/5711319 一个获取指定目录下一定格式的文件名称和文件修改时间并保存为文件的python脚本 ...

  8. PHP 获取指定目录下所有文件（包含子目录）

    PHP 获取指定目录下所有文件(包含子目录) //glob — 寻找与模式匹配的文件路径 $filter_dir = array('CVS', 'templates_c', 'log', 'img', ...

  9. [转]android 获取视频帧

    本文转自:http://blog.csdn.net/heart_Moving/article/details/17414067 今天做Android视频文件解码,需求:从一个视频文件获取到一帧一帧的图 ...

随机推荐

  1. 一文读懂对抗生成学习(Generative Adversarial Nets)[GAN]

    一文读懂对抗生成学习(Generative Adversarial Nets)[GAN] 0x00 推荐论文 https://arxiv.org/pdf/1406.2661.pdf 0x01什么是ga ...

  2. bzoj3891[Usaco2014 Dec]Piggy Back*

    bzoj3891[Usaco2014 Dec]Piggy Back 题意: 给定一个N个点M条边的无向图,其中Bessie在1号点,Elsie在2号点,它们的目的地为N号点.Bessie每经过一条边需 ...

  3. bzoj4397[Usaco2015 dec]Breed Counting*

    bzoj4397[Usaco2015 dec]Breed Counting 题意: 给定一个长度为N的序列,每个位置上的数只可能是1,2,3中的一种.有Q次询问,每次给定两个数a,b,请分别输出区间[ ...

  4. 【面试题资源共享】一文总结最高频软件测试|sq|语句|思维发散|计算机基础|Linux|测试用例|接口测试|等技术面试题

    思维发散 1.一个球, -把尺子长度是球直径的2/3,怎样测出半径?2.四枚硬币,花面朝上,每次翻转三个,几次可以将四枚硬币变为字面朝上?3. U2合唱团在1 7分钟内赶到演唱会现场问题?4.小明一家 ...

  5. Cyber Security - Palo Alto Firewall Objects Addresses, Services, and Groups(1)

    Address Objects and Groups Creating address objects. Organizing address objects with address groups ...

  6. Go Pentester - HTTP Servers(2)

    Routing with the gorilla/mux Package A powerful HTTP router and URL matcher for building Go web serv ...

  7. P1536 村村通（洛谷）并查集

    隔壁的dgdger带我看了看老师的LCA教程,我因为学习数学太累了(就是懒),去水了一下,感觉很简单的样子,于是我也来写(水)个博客吧. 题目描述 某市调查城镇交通状况,得到现有城镇道路统计表.表中列 ...

  8. 【NET开发】图片处理类-仿照七牛云图片处理功能

    介绍 Sop.Common.Img **请看 七牛云的图片处理功能介绍文档了解本项目功能 ** 此项目是有https://github.com/Sopcce/.Net-Common-Utility中的 ...

  9. Elasticsearch7.X ILM索引生命周期管理（冷热分离）

    Elasticsearch7.X ILM索引生命周期管理(冷热分离) 一.“索引生命周期管理”概述 Elasticsearch索引生命周期管理指:Elasticsearch从设置.创建.打开.关闭.删 ...

  10. 设计模式：observer模式

    目标:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新 例子: class Observer //观察者 { public: virtual vo ...