<!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. java 面向对象（二十一）：属性的赋值顺序

    * ①默认初始化 * ②显式初始化/⑤在代码块中赋值 * ③构造器中初始化 * ④有了对象以后,可以通过"对象.属性"或"对象.方法"的方式,进行赋值 * * ...

  2. 数据分析01 /numpy模块

    数据分析01 /数据分析之numpy模块 目录 数据分析01 /数据分析之numpy模块 1. numpy简介 2. numpy的创建 3. numpy的方法 4. numpy的常用属性 5. num ...

  3. 如何在项目中封装api

    一般在项目中,会有很多的api请求,无论在vue,angular,还是react中都应该把接口封装起来,方便后期的维护. 1.新建一个api文件 我们可以在项目的分目录下创建一个api文件夹,在这里面 ...

  4. 主席树铺垫——总区间第k小

    题目描述(口糊) 先给定一个长度为n的数列,然后给m次操作,每次输入b,求第b小的数. 样例输入 5 7 4 10 9 23 5 1 2 3 4 5 样例输出 4 7 9 10 23 数据范围及温馨提 ...

  5. 如何将 Bitbucket 的 pull request 签出到本地 review

    将 pull request 签出到本地进行 review, 最大的好处是可以通过 IDE 来查找各种变量和方法的上下文引用,以便充分发挥我们杠精的本领,将 pull request 中的各种合理和不 ...

  6. [开源硬件DIY] 自制一款精致炫酷的蓝牙土壤温湿度传感器，用于做盆栽呵护类产品（API开放，开发者可自行DIY微信小程序＼安卓IOS应用）

    目录 前言: 1. 成品展示 2. 原理图解析 3. pcb设计 4. 嵌入式对外提供接口 4.1 蓝牙广播 4.2 蓝牙服务和属性 4.3 数据包格式 4.4 数据通信模型 重要 . 前言: 本期给 ...

  7. java环境搭建--Windows 10下java环境搭建

    1.下载jdk:https://www.oracle.com/java/technologies/javase-jdk8-downloads.html(注意需要注册登录Oracle账号) 2.安装此处 ...

  8. js 绑定的键盘事件

    在全局绑定键盘事件 document.onkeydown = function(event){        //在全局中绑定按下事件 var e  = event  ||  window.e; va ...

  9. python 99乘法表

    先把代码贴上 for i in range(1,10): for j in range(1,i+1): s="%d X %d = %d"%(j,i,i*j) print(s,end ...

  10. 【Logisim实验】构建立即数-随机存储器-寄存器的传送

    关于Logisim Logisim在仿真软件行列中算是比较直观的软件了,它能做的事情有很多,唯一不足的是硬件描述语言的支持,总体上来说适合比较底层的仿真,依赖于Hex值,通过线路逻辑设计能够较好的 关 ...