<!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. flask 源码专题（三）：请求上下文和应用上下文入栈与出栈

    1.请求上下文和应用上下文入栈 # 将ctx入栈,但是内部也将应用上下文入栈 ctx.push() def push(self): # 获取到的 top == ctx top = _request_c ...

  2. python 并发专题（六）：协程相关函数以及实现（gevent）

    文档资源 http://sdiehl.github.io/gevent-tutorial/ 一.协程实现 线程和协程 既然我们上面也说了,协程也被称为微线程,下面对比一下协程和线程: 线程之间需要上下 ...

  3. CMMI规范目录结构

  4. P1050 精卫填海

    [问题描述] 发鸠之山,其上多柘木.有鸟焉,其状如乌,文首,白喙,赤足,名曰精卫,其名自詨.是炎帝之少女,名曰女娃.女娃游于东海,溺而不返,故为精卫.常衔西山之木石,以堙于东海.——<山海经&g ...

  5. PyQt5布局管理器

    布局分类 绝对定位:使用move方法将空间直接定死在某个坐标,不会随着窗口大小的改变而改变 可变布局:使用各种布局管理器,实现组件的位置和大小随着窗口的变化而变化 布局管理器 QHBoxLayout: ...

  6. STL源码剖析：关联式容器

    AVL树 AVL树定义:红黑树是一颗二叉搜索树,特别的是一棵保持高度平衡的二叉搜索树 AVL树特点: 每个结点的左右子树的高度之差的绝对值(平衡因子)最多为1 AVL树插入: 说明:新增节点的平衡因子 ...

  7. LeetCode 85 | 如何从矩阵当中找到数字围成的最大矩形的面积？

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题53篇文章,我们一起来看看LeetCode中的85题,Maximal Rectangle(最大面积矩形). 今天的 ...

  8. python中if及if-else如何使用

    if 结构 if 结构允许程序做出选择,并根据不同的情况执行不同的操作 基本用法 比较运算符 根据 PEP 8 标准,比较运算符两侧应该各有一个空格,比如:5 == 3. PEP8 标准 ==(相等) ...

  9. Python3的一些基本输入输出

    # python3 # 基本输入输出 #学会使用split()的使用是关键,input()的返回值一定是字符类型 .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. ...

  10. 水题-------判断Digit Generator

    题目链接:https://vjudge.net/problem/UVA-1583 题意:给出一个数N,判断最小的数x使x+(x各位数字的和)=N 题解:这是一个暴力求解题,不过有技巧,x各位数字的和最 ...