js实现截取视频帧图片作为封面预览图

时间: 2018-10-12阅读: 12245标签: 视频

前端需要把视频文件的第一帧图像截取出来,并做为缩略图显示在页面上,这里需要利用html5中强大的画布canvas来实现该功能。


代码如下:

<video id="video" controls="controls">
    <source src="../../assets/img/vedio/tomandjerry.mkv">
</video>
<div id="output"></div>
<script type="text/JavaScript">
    (function(){
        var video, output;
        var scale = 0.3;
        var initialize = function() {
            output = document.getElementById("output");
            video = document.getElementById("video");
            video.addEventListener('click',captureImage);
        };
 
        var captureImage = function() {
            var canvas = document.createElement("canvas");
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
 
            var img = document.createElement("img");
            img.src = canvas.toDataURL("image/png");
            output.appendChild(img);
        };
 
        initialize();
    })();
</script>


说明:

在使用canvas.toDataURL('image/png')的时候出现跨越问题 ,在服务器添加如下代码:Access-Control-Allow-Origin: *即可。

当然目前大部分云服务上,他们是有相应的接口来获取某一帧的画面。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1143

基于 WebRTC 的 RTSP 视频实时预览

由于项目需要,需要使用摄像头预览功能,设备型号为海康威视。目前已存在的基于 FFmpeg 的方案延迟都太高,所以项目最终选择基于此方案。方案选用为基于 WebRTC 的视频即时通讯,它原生支持对 RTP 协议的解码

Web视频格式

网络视频一直都很火。虽然在页面上嵌入 Instagram 和 Youtube 视频非常简单,但是有越来越多的需求 —— 比如许多电子商务的场景 —— 要求定制的视频传输方法。

Bideo.js实现全屏视频背景

想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览。那么我告诉你有一款Javascript库正合你意,它就是Bideo.js。

使用 multipart/x-mixed-replace 实现 http 实时视频流

关于实时视频传输,业界已经有非常多成熟方案,分别应用在不同需求场景。本文介绍一种基于 HTTP ,非常简单、易理解的方案,实用性不强,但有助于理解 HTTP 协议。

优化 MP4 视频以便更快的网络串流

随着 Flash 的落寞 以及 移动设备的爆发性增长 ,越来越多的内容以 HTML5 视频的方式传递。在上一篇文章中你甚至能看到 使用 HTML5 视频替换 GIF 动图来优化网站访问速度 这样的技巧

聊聊 Web 视频播放的画中画模式

Chrome 在升级到 70 的时候开始对视频播放的画中画模式开始支持了,用户在浏览器 Web 页面可以通过 画中画的形式强当前画面停留在屏幕正上方,无论你在使用其他软件还是切到其他 Tab ,都可以看到当前画面

如何实现沉浸式视频体验?

沉浸式视频体验,大致内容是一个页面里有几十个视频,用户点击其中一个视频时,该视频自动滑动到屏幕可视区域的顶部开始播放,并暂停其他视频,该视频滑出屏幕可视区域之后要自动暂停。

vue实现自定义H5视频播放器

前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑,这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭

移动端视频h5表现问题汇总

同屏播放视频、移动端视频预加载:由于移动端不能预加载视频,所以hack一种方案:监听WXJSBridge WeixinJSBridgeReady、微信安卓环境下需要在touchmove事件中阻止掉默认事件,否则不能触发视频播放 、 由于微信安卓版本基于x5内核,视频会出现全屏按钮,而且去不掉,会误导用户点击

web视频播放

毫无疑问,现在是短视频、直播的时代。视频内容逐渐代替图文形式成为网友们获取新鲜事物以及展现自我的一大媒介。随着5G的到来,2020年属于直播短视频爆发式增长的一年,电商平台也都涌入直播营销的大风口

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!