js截取video标签图片

MIKUScallion 2019-12-24

通过js截取video窗口的一帧渲染到canvas。

如果需要保存为图片，只需将canvas保存为图片即可。

canvas保存为图片参考：https://www.cnblogs.com/dch0/p/11698982.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #localvideo{
                width: 500px;
            }
            #localcanvas{
                width: 500px;
            }
        </style>
    </head>
    <body>
        <video id="localvideo" autoplay="autoplay">
            <source src="http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4"></source>
        </video>
        <canvas id="localcanvas" width="1920" height="1080"></canvas>
        <br />
        <button id="snapbtn">截取</button>
    </body>
    <script>
        var video = document.getElementById("localvideo");
        var snapbtn = document.getElementById("snapbtn");
        var canvas = document.getElementById("localcanvas");
        var ctx = canvas.getContext("2d");
        snapbtn.onclick = function(){
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        }
    </script>
</html>

: MIKUScallion

相关推荐

Mybatis模糊查询

select * from video where point=#{point} and title like concat

Dullonjiang 0喜欢 / 0评论 2020-07-08

FFMPEG ffmpeg + cocos2d video test

double tims = fl->_pts * fl->_timeBase * 1000;

ShoppingChen 0喜欢 / 0评论 2020-06-25

[JavaScript] HTML5 播放hls流媒体视频流

PC端chrome，IE，Firefox以及集成以上内核的各种浏览器，以及旧版的Android SDK的webview 不能播放

WebVincent 0喜欢 / 0评论 2020-06-06

html5 video视频，本地环境好的，线上环境，不能播放

本地环境ok，发布到线上不能播放。之前看这个视频，把video放在public文件夹下的。

niehanmin 0喜欢 / 0评论 2020-06-03

4.9 html5新增

section：更偏于划分区域。article：更偏向于内容的展示。figure：代表一个独立的区域figcaptionfigure区域的标题aside：侧边栏time：时间类mark:高亮显示文本dialog:定义一个对话框视频：<video sr

行吟阁 0喜欢 / 0评论 2020-04-10

markdown语法

text-align: center;

Kingcxx 0喜欢 / 0评论 2020-03-07

处理HTML5视频播放.py

from selenium import webdriverfrom time import sleepdriver = webdriver.Firefox()driver.get("http://videojs.com")video

爱好HtmlCssJs 0喜欢 / 0评论 2020-01-18

『html5、css3』将视频做为网页背景超炫！

想要实现这种效果很容易，只需要懂得H5的video，按照我的步骤一步一步来就可以了~css样式也没有什么好说的，只是要让视频充满屏幕、循环、无声、直接播放、隐藏按钮和不重复就可以了。

冰蝶 0喜欢 / 0评论 2020-01-08

HTML5 VIDEO

若放一个div或图片在html5的video元素的位置上，在win，ipad，android上是有区别的。video位置上无论放什么都是无法监听到事件的。都支持mp4格式，但是必须是h264 code，否则也是不支持的。使用jquery的bind方法是无法

Jym 0喜欢 / 0评论 2012-07-05

微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义实例

把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣?果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看.由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可.其他的属性就不说了,以后遇到再细细研究.从上面的

tumobi 0喜欢 / 0评论 2016-12-08

ffmpeg linux

FFmpeg version 0.6.5, Copyright 2000-2010 the FFmpeg developers. built on Jan 29 2012 23:55:02 with gcc 4.1.2 20080704 . config

一点一刻 0喜欢 / 0评论 2013-09-17

Linphone编译： Linux 下无Video编译

最近使用Asterisk做服务器，需要兼容sip客户端，所以对Linphone进行编译。网上有很多SIP phone客户端，但大部分开源的都没有支持视频部分。所以采用了Linphone,不知道大家有没有更好的，可以告诉我。我对Linux不是很熟悉，只是了解

HandsomeHong 0喜欢 / 0评论 2010-08-13

Cisdem Video Player for mac(高清视频播放器)

Mac视频播放器哪款好用？当然首推Cisdem Video Player for Mac！功能强大，操作简单并且不需要缓冲就可以提供更好的高清视频播放体验，是一款不能错过的视频和音频的播放软件。macdown.com为您提供Cisdem Video Pla

Charliewolf 0喜欢 / 0评论 2019-11-10

Video Converter Movavi for Mac(视频与音频转换工具)

Video Converter Movavi for Mac版是Mac os平台上一款方便快键的Mac视频转换软件，Video Converter Movavi for Mac版不仅能够将你的视频转换成其他的格式，还能将你的音频转换成其他的播放格式，非常的

WenFY的CSDN 0喜欢 / 0评论 2019-10-24

HTML5实现video标签的皮肤自定义

Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.

89510194 0喜欢 / 0评论 2019-10-22

html 中video标签视频不自动播放的问题

有个需求，客户想做个打开官网自动播放一段视频，楼主使用了video标签，即下面的代码：：于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop”然而通过地址栏进去的时候，视频并没有自动播放，最后，找资料发现，添加

nercon 0喜欢 / 0评论 2019-10-20

HTML5添加图片和视频2-8

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

行吟阁 0喜欢 / 0评论 2019-10-22

HTML5视频播放器accessible html5 video player

accessible html5 video player 是一款开源的轻量级播放器，采用HTML5视频播放技术，支持字幕显示、视频自由跳播、重播等功能。该html5视频插件由paypal Accessibility 团队开发，兼容所有Firefox、ch

zhangli 0喜欢 / 0评论 2014-11-12

html5调用手机摄像头，实现拍照上传功能

今天做手机网站，想实现手机扫描二维码功能。首先实现在浏览器中调用手机摄像头，实现拍照功能并且把拍下的照片显示在页面并上传到服务器上，然后再在服务器端进行分析。首先实现在浏览器中调用摄像头，当然用现在火的不行的html5，html5中的<video&g

jadechen00 0喜欢 / 0评论 2014-11-08

如何用html5实现在网页上显示本地摄像头

HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。　　HTML5 的 The Media Capture API 提供了对摄像头的可编程访问，用户可以直接用 g

owhile 0喜欢 / 0评论 2014-11-08

HTML5多媒体功能之video标签

if { //probably:浏览器最可能支持该音频/视频类型。Your browser does not support tde video tag.如果出现该属性，则向用户显示控件，比如播放按钮。

WCschool官方 0喜欢 / 0评论 2015-03-03

HTML5 video标签使用 DOM 进行控制

HTML5 <video> 元素同样拥有方法、属性和事件。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设

nothings0o 0喜欢 / 0评论 2015-11-14

详解js获取video任意时间的画面截图

首先就是要把视频加载出来，然后使用canvas.getContext.drawImage;获取到当前视频时间的截图，需要不同时间的video视频图，设置video的currentTime（单位秒），然后videoElement这个对象信息会实时更新。ale

alice 0喜欢 / 0评论 2019-04-17

HTML5 video 标签浏览器兼容问题

不可以只有MP4格式，一定要引入Ogg格式视频，否则在火狐上会不兼容报错。注意不可以直接在<video>标签里面加width = "100%"，因为的属性width只支持像素值，不支持百分比。虽然<video widt

后乐 0喜欢 / 0评论 2017-11-07

使用MPlayer获取文件信息

以上红色部分就是我们需要的常规视频信息。根据mplayer&ffmpeg的输出，用脚本对输出做分析，既可以获得。分辨率，码流，视频格式，音频格式，音频采样率，音频声道，fps，等等

老王的技术 0喜欢 / 0评论 2011-08-16

移动端video局部播放视频

<video ref="myVideo" id="myVideo" preload="auto" style="width:100%;height:4.22rem;"

李小丰天天向上 0喜欢 / 0评论 2019-07-01

html5 video标签无法播放格式已兼容的视频

偶然发现html5的video标签不能播放MP4格式的视频，但是文档明确表明video标签是兼容MP4格式的。在pc端的播放程序，一般会加载很多解析程序，所以看起来MP4格式是没有什么区别的。但是video标签提供的解析方式单一，虽然都是MP4格式，但有些

勤能补拙孰能生巧 0喜欢 / 0评论 2019-07-01

Leetcode讲解视频（持续更新中...）

146.LRU缓存机制108.将有序数组转换为二叉搜索树107.二叉树的层次遍历106. 从中序与后序遍历序列构造二叉树105. 从前序与中序遍历序列构造二叉树101.镜像二叉树100.相同的树

yaohustiAC 0喜欢 / 0评论 2019-07-01

安卓移动端video标签将页面元素覆盖。

此时已经脱离了文档流，并且与文档已经非同层了，所以设置z-index是无效的。分别为：x5-playsinline：行内播放。否则会发现，额。。。所以移动端中，不建议做视频和dom重合的设计。以下内容范围：安卓1.在video未被播放之前，video标签属

whale 0喜欢 / 0评论 2019-07-01

golang项目代码重构（二）

使用interface重构代码，面向接口，减少重复代码项目背景需要提供节目，节目集数据的增删改查，数据库使用ES重构前 →_→本文着重强调用接口重构的思路，所以只选取读取功能作为例子数据结构type Video struct{. }ES中对应两个index

cleanerxiaoqiang 0喜欢 / 0评论 2019-06-30

video同层播放层级过高遮挡模拟暂停按钮的问题

在ios和android上有显示的区别，如果你只是显示一个普通的网页，只需要在iOS上加上webkit-playsinline="true" 安卓上x5-video-player-type="h5" x5-video

yuyu00 0喜欢 / 0评论 2019-06-29

遇到的几个浏览器兼容性问题

背景解决浏览器的兼容性问题是一件很烦的事情，其中并没有太多高深的技巧，但是开发需要，也不得不去解决它，最近在开发项目中也遇到一些兼容性的问题，希望把这些问题的解决方式记录下来，下次遇到就直接拿过来用，也希望对他人有一些帮助。}3.css的transitio

zyytaiyame 0喜欢 / 0评论 2019-06-28

10个常见的HTML5面试题及答案

doctype html> HTML5使用UTF-8编码演示：。<meta charset="UTF-8">2.HTML5中如何嵌入音频？</audio>3.HTML5中如何嵌入视频？</video&

tianqi 0喜欢 / 0评论 2017-02-02

Html5入门

HTML5是下一代的HTML。HTML5将成为HTML、XHTML以及HTMLDOM的新标准。HTML的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。HTML

勤能补拙孰能生巧 0喜欢 / 0评论 2016-08-25

canvas学习（一）：七巧板

前几天在慕课网上学canvas的视频，因为老师讲的太好了让我觉得canvas很好玩，就跟着老师做了介个demo，这里记录一下。当前浏览器不支持canvas，请换个浏览器试试。

Ysiqiqi 0喜欢 / 0评论 2016-07-04

HTML5 Audio & Video 属性解析

play() 方法开始播放当前的音频或视频。load() 方法用于在更改来源或其他设置后对音频/视频元素进行更新。<button onclick="changeSource()" type="button"&g

wxcmdn 0喜欢 / 0评论 2019-06-28

Capturing Audio & Video in HTML5

The road to getUserMedia()If you're not aware of its history, the way we arrived at thegetUserMedia()API is an interesting tale.

andyhu00 0喜欢 / 0评论 2015-07-08

html5 video fullscreen 全屏

打开网页，视屏就全屏显示。通过javascript获取video的DOM对象，并设置相关属性，a. min-width: 100% 跟 width: 100% 画面渲染效果是不同的, min-height也是。b. 有的视频文件有被方案2 "

zhaosnow 0喜欢 / 0评论 2015-03-29

HTML5视频播放器accessible html5 video player

accessible html5 video player 是一款开源的轻量级播放器，采用HTML5视频播放技术，支持字幕显示、视频自由跳播、重播等功能。该html5视频插件由paypal Accessibility 团队开发，兼容所有Firefox、ch

liuyongfang0 0喜欢 / 0评论 2014-11-12

如何用html5实现在网页上显示本地摄像头

HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。　　HTML5 的 The Media Capture API 提供了对摄像头的可编程访问，用户可以直接用 g

PioneerFan 0喜欢 / 0评论 2014-11-08

HTML5 Video标签

现代互联网中，我们大量的使用视频，在HTML5定义中提供了一个统一的方式来展示视频内容。互联网视频现在互联网视频大都使用Flash来实现。但是不同的浏览器可能使用不同的插件。HTML5定义了一个统一元素来指定视频和音频的插入和显示，如下：精心开发5年的UI

统一开发环境UDE 0喜欢 / 0评论 2014-09-29

火狐放不了html5 video MP4格式

火狐放不了html5 video MP4格式这里教大家解决火狐播放html5 video时显示视频或mime类型不支持。序列号：ABCDEF1234BC98-B913-8273-017F3954198967三：添加文件，输出格式选择输出到OGG格式。您的

拭血 0喜欢 / 0评论 2019-06-27

HTML5学习之——HTML 5 Video + DOM

HTML5 <video> - 使用 DOM 进行控制HTML5 <video> 元素同样拥有方法、属性和事件。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。下例中简单的方法

XaverSun 0喜欢 / 0评论 2014-05-06

html5 video使用，怎样截取正在播放的时间

<!DOCTYPE html> <html> <head>

yaoliuwei 0喜欢 / 0评论 2014-04-13

canvas绘制视频封面

img.src = canvas.toDataURL;//转换成base64图片，地址拿出来就可以直接使用

yixiaof 0喜欢 / 0评论 2019-06-26

html5 video 视频页面内缓存 - 全量加载方法

但是为了更好的用户体验，我们有的时候需要预加载视频，比如有的视频可能是在用户产生某些交互进行显示播放的。这个时候我们优先想到的是 preload 属性。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。它并没有自

renpinghao 0喜欢 / 0评论 2019-06-26

HTML5学习笔记(三)-Video、Audio

HTML5增加了audio和video两个元素，开发人员不必使用插件就能播放音频和视频了。Audio Video Interleave、Flash Video、MPEG4、Matroska、Ogg. 暂时没有对流视频的支持和规范。资源受跨域共享的限制。全频

运维工程师日记 0喜欢 / 0评论 2013-07-03

那是我在夕阳下的奔跑：边跑边学习html5之audio与video

今天为大家分享一下html5中的视频与音频。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。Flash这项技术诞生于20多年前，曾被应用于98%的个人电脑上，是开发者最青睐的软件之一，被用于开发游戏、视频播放器和可在多个网

红壶吃猬队 0喜欢 / 0评论 2019-06-21

应用canvas获取video的缩略图

发布视频时候，经常需要上传同时上传视频的缩略图，近日，应产品经理的的要求，需要做一个发布视频动态的功能，我第一反应就想到了H5的标签vidio和canvas，在这里记录下我完成该功能的过程：首先，整体思路是创建一个vidio，然后创建一个canvas和一个

laxexue 0喜欢 / 0评论 2019-06-21