<!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. 爬虫01 /jupyter、爬虫概述、requests基本使用

    爬虫02 /jupyter.爬虫概述.requests基本使用 目录 爬虫02 /jupyter.爬虫概述.requests基本使用 1. jupyter的基本使用 2. 爬虫概述 3. reques ...

  2. 数据可视化之DAX篇（二十三）ALLEXCEPT应用示例：更灵活的累计求和

    https://zhuanlan.zhihu.com/p/67441847 累计求和问题,之前已经介绍过(有了这几个公式,你也可以快速搞定累计求和),主要是基于比较简单的情形,针对所有的数据进行累计求 ...

  3. layui弹窗里面 session过期 后跳转到登录页面

    1.在登录页面添加 <script> $(function () { if (top != window) { layer.msg("登录失效", {icon: 5}) ...

  4. Python Ethical Hacking - Malware Packaging(1)

    PACKAGING Convert python program into an executable that: Packages all program files into a single e ...

  5. JAVA学习过程中遇到的BUG

    Java异常 1.NullPointException java.lang.NullPointException,就是我们经常遇到的空指针异常. java是没有指针的,这里说的"java指针 ...

  6. INS-40718 和 INS - 30516

    RAC  安装的时候报错, INS-40718 这个是自己填写的  scan name 和 /etc/hosts  里定义的不一致  可以cat   /etc/hosts   看一下 INS - 30 ...

  7. python-study-文件操作

    # 一.文件操作的作用 :读取内容.写入内容.备份内容.... # 文件的基本操作,文件操作包含:打开.关闭.读.写.复制.... # 打开 读写 关闭 # 文件备份 # 文件和文件夹的操作 # 总结 ...

  8. python thrift 实现 单端口多服务的过程

    Thrift 是一种接口描述语言和二进制通信协议.以前也没接触过,最近有个项目需要建立自动化测试,这个项目之间的微服务都是通过 Thrift 进行通信的,然后写自动化脚本之前研究了一下. 需要定义一个 ...

  9. Git报错问题集锦

    git merge合并时遇上refusing to merge unrelated histories的解决方案 如果git merge合并的时候出现refusing to merge unrelat ...

  10. WebApiClientCore简约调用百度AI接口

    WebApiClientCore WebApiClient.JIT/AOT的netcore版本,集高性能高可扩展性于一体的声明式http客户端库,特别适用于微服务的restful资源请求,也适用于各种 ...