Web实战:如何进行视频截图

栏目: Html5 · 发布时间: 5年前

内容简介:各位读者大人们好,不知道各位读者大人们近来如何。由于前段时间事情比较多,文章的更新就给耽误了,项目需要上线经常加班,再加上自己的一些学习计划,一晃就是一个多月,没有更新文章。有人会问,登哥你怎么不搬运和转载别人的文章呢?,这样公众号就不会断更了,这个问题问的好,熟悉我的读者应该会发现,我的文章全都是原创文章。

各位读者大人们好,不知道各位读者大人们近来如何。

由于前段时间事情比较多,文章的更新就给耽误了,项目需要上线经常加班,再加上自己的一些学习计划,一晃就是一个多月,没有更新文章。

有人会问,登哥你怎么不搬运和转载别人的文章呢?,这样公众号就不会断更了,这个问题问的好,熟悉我的读者应该会发现,我的文章全都是原创文章。

刚开始运行公众号时,可能转载过一两篇文章,从那以后我就坚持原创了。不在进行转载,这其实和我公众号的定位有关系。

我写文章的目的很简单,不是为了涨粉,更多的是为了个人成长,因为你在写文章的同时其实就是在自我学习的过程,这个过程要比你单纯的看知识点要吸收的更有效率。

当然了,在这个过程中如果能收获认可自己的读者,那是一件很开心的事情。如果没有,我也没有损失什么。一直按照我的节凑进行就好。

所以从这个角度来说,转载可能对我的意义就不大了。

最近在自学 Python 后面除了给大家分享前端的相关知识以外,还会给大家分享更多有意思东西。大家以后可以多关注关注。

今天给大家分享一个实战技巧,最近在项目中使用到的,需求是在播放视频的时候可以进行截图。

我们都知道,网页中大多都是用 <video> 标签进行视频的播放。那如何才能实现视频的截图呢?

这里我们用到了 canvas 的相关功能。我们都知道,canvas 是伴随着 HTML5 出现的,它具有强大的绘图能力。很多可视化库都是利用到了 canvas。

因为 canvas 具有对图像的操作能力,今天我们就用它来实现视频的截图操作,之前对 canvas 有过一段时间的学习,如果想学习 canvas 的同学,这里推荐慕课网上的入门课程。

这里主要用到两个方法:

drawImage

drawImage 方法是在画布上绘制图像、画布或视频。 语法:

ctx.drawImage(image, dx, dy); ctx.drawImage(image, dx, dy, dWidth, dHeight); ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 三种用法,本文不做过多描述,有兴趣的可以查看相关文档。其中的参数 image:允许任何的图像源,所以我们就可以利用这个特性,对 video 进行操作。更多可查看相关文档

toDataURL

toDataURL 方法可以返回 Canvas 图像对应的 data URI,也就是平常我们所说的base64地址。 格式如下: data:[][;base64],

实现

利用上述方法我们很容易就能实现视频的截图,主要分为三步:

使用 drawImage 方法在画布上绘制图像。

使用 toDataURL 方法获取图像的地址。

创建一个img标签,赋值给 src。

<video id="video" src="./flower.webm" width="300" controls></video>
  <button onclick="captureVideo()">截图</button>
  <script>
    let video = document.getElementById("video");
    let canvas = document.createElement("canvas");
    let img = document.createElement("img");
    let ctx = canvas.getContext("2d");
    function captureVideo() {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      img.src = canvas.toDataURL();
      document.body.append(img);
    }
复制代码

到这里就大功告成了,一起来看效果吧。

Web实战:如何进行视频截图

最后,如果觉得文章不错,对你有所启发,点赞是一种态度也是一种认可。

微信公众号:六小登登,更多干货文章,这里有我的很多故事,欢迎一起交流。

Web实战:如何进行视频截图

以上所述就是小编给大家介绍的《Web实战:如何进行视频截图》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

社交红利2.0

社交红利2.0

徐志斌 / 中信出版社 / 2015-9 / 42元

大型社交网络发展至今,开始显露出更为惊人的力量。有一个独特现象与这一结果相伴相生,即新应用或服务一进入社交网络就即时引爆,就像用户在等待它出现一样。随即开始的病毒式扩散,让创业者成为全民话题的焦点。但这一切是如何实现的?具备哪些特征的合作伙伴才可以被即时引爆? 作者从其长期追踪的近30个一进入微博、微信就引爆的经典案例中甄选出若干典型案例。从大量一手鲜活的后台数据入手,并结合腾讯对社交网络的......一起来看看 《社交红利2.0》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具