<!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. VSCode下，项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

    vscode下webpack错误:无法将“webpack”项识别为 cmdlet.函数.脚本文件或可运行程序的名称.请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次. 解决方法: 1.因为 ...

  2. hihoCoder 1049 后序遍历 最详细的解题报告

    题目来源:后序遍历 解题思路:开始时我只知道先通过先序.中序求出二叉树,然后再后序遍历二叉树,这当然也是一种解题思路,但是会做一些无用功,比如:计算二叉树.其实,可以直接通过先序序列和中序序列直接求出 ...

  3. matlab中的静态变量与全局变量

    matlab中的静态变量和全局变量 1.静态变量 在matlab中,和其他语言一样,函数中的变量一把都是局部变量,也就是说,在函数调用完毕后,变量就会被释放.但是有些时候回希望上次改变的变量在下一次调 ...

  4. TX 1核4G2M云服务器，376/2年，可免费续1年

    腾讯云个人开发者活动 https://cloud.tencent.com/act/developer

  5. Burp Suite Compare Module - 对比模块

    虚拟目标网站: http://10.0.0.15/orangehrm/login.php (RangeHRM)    -  可以通过OWASP虚拟机搭建此网站 模拟攻击步骤: 1. 通过设置浏览器代理 ...

  6. 享元模式（c++实现）

    享元模式 目录 享元模式 模式定义 模式动机 UML类图 源码实现 优点 缺点 模式定义 享元模式(Flyweight),运用共享技术有效的支持大量细粒度的对象. 模式动机 如果一个应用使用了大量的对 ...

  7. SDS——重用StringBuilder

    package example.java; /** * @author 杜科 * @description 简单动态字符串,非线程安全.采取类似buffer的设计,使其成为一个可以方便重用的Strin ...

  8. [转载]Python ImportError: No module named 'requests'解决方法

    windows解决办法1.找到easy_install.exe.一般在python的安装路径下的Scripts文件夹中,如C:\Python34\Scripts\easy_install.exe2.从 ...

  9. Springboot整合SpringSecurity--对静态文件进行权限管理

    文章目录 一.要求 二.依赖管理 三.配置config文件 四.扩展 一.要求 index.html 可以被所有用户访问 1.html只能被VIP1访问 2.html只能被VIP2访问 3.html只 ...

  10. JVM系列之:String.intern的性能

    目录 简介 String.intern和G1字符串去重的区别 String.intern的性能 举个例子 简介 String对象有个特殊的StringTable字符串常量池,为了减少Heap中生成的字 ...