简单地利用canvas载入视频

canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入Canvas画布里面，这个办法有点简单粗暴，原理为：监听了video的play事件，并设置定时器，每20ms调用一次drawImage，当video的ended事件触发时，清除定时器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Test</title>
</head>
<body><video src="p03501roz02.p702.1.mp4" id="video1" width="270" controls autoplay></video><canvas id="myCanvas" width="270" height="135"></canvas><script>var v = document.getElementById('video1')var c = document.getElementById('myCanvas')var ctx = c.getContext('2d')// 每20ms画一次图v.addEventListener('play', function () {var i = window.setInterval(function () {ctx.drawImage(v, 0, 0, 270, 135);if (v.ended) {clearInterval(i)}}, 20)});</script>
</body>
</html>

简单地利用canvas载入视频相关推荐

js截屏 video_video结合canvas实现视频在线截图功能
给大家讲解下我前几天看到的一个有趣小demo:视频在线截图.以下是我修改和添加了新功能后的效果图: 是不是很酷,其实挺简单的,下面就给大家讲讲怎么弄哈. 这里主要分为三大块功能,首先是第一个: 利用U ...
web实战：video结合canvas实现视频在线截图
给大家讲解下我前几天看到的一个有趣小demo:视频在线截图.以下是我修改和添加了新功能后的效果图: 是不是很酷,其实挺简单的,下面就给大家讲讲怎么弄哈. 这里主要分为三大块功能,首先是第一个: 利用U ...
在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
canvas绘制视频封面
一.需求:上传视频,同时截取视频某一帧作为视频的封面. 二.实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了. 三.代码: <!DOCTYPE html ...
教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...
视频封面图片修改html代码,canvas绘制视频封面的方法
一.需求:上传视频,同时截取视频某一帧作为视频的封面. 二.实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了. 三.代码: capture screen vi ...
Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
php怎么实现弹幕,HTML如何利用canvas实现弹幕功能
本篇文章主要介绍HTML如何利用canvas实现弹幕功能,感兴趣的朋友参考下,希望对大家有所帮助. 简介最近在做大作业的时候需要做一个弹幕播放器.借鉴了一下别人的源码自己重新实现了一个,演示如下主 ...
html5 自动扣图,html5利用canvas实现颜色容差抠图功能
利用canvas的getImageData,我们可以获取到一张图片每一个像素的信息,而通过对每一个像素信息的对比,我们就可以找到需要消去的像素点.比如下面这一张图片,如果我们想要扣去白色部分(粉色是b ...

简单地利用canvas载入视频

简单地利用canvas载入视频相关推荐

最新文章

热门文章