从视频中截取首帧作为封面图并展示出视频及封面图（canvas）

html

<p class="clearfix"><label>视频文件：</label><span><video id="video" controls="controls" src="http://{{model.videoUrl}}">您的浏览器不支持 video 标签。</video><span><input id="file" type="file" value="" name="file" style="display: none;" onchange="myFunction()"/><label style="width: 100%;" for="file">上传视频</label></span></span>
</p>
<!--在网上查的是加上 crossorigin="anonymous" 就可以避免跨域的问题 但是我自己测试的还是不行 可能是我们后台那边没有添加吧 有时间让后台在请求头处加一下试试 如果可以的话在更新-->
<img id="img" crossorigin="anonymous" style="float: left;" src="../../img/aaa.png" />

$(function() {initialize();
})
var video, videoFM;
var scale = 0.8;
function initialize() {video = document.getElementById("video");video.addEventListener('loadeddata', capImage);
};function capImage() {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.getElementById("img");img.src = canvas.toDataURL("image/png");
};
function getFileURL(file) {var getUrl = null;if(window.createObjectURL != undefined) { // basicgetUrl = window.createObjectURL(file);} else if(window.webkitURL != undefined) { // webkit or chromegetUrl = window.webkitURL.createObjectURL(file);} else if(window.URL != undefined) { // mozilla(firefox)getUrl = window.URL.createObjectURL(file);}return getUrl;
}
function myFunction() {//点击上传视频var videoFile = document.getElementById('file');var url = getFileURL(videoFile.files[0]); //把选择的视频文件 files[0]$('#video').prop('src', url)console.log(videoFile.files[0])initialize();
}

希望能够帮助到更多的小伙伴们，图片跨域的问题后面解决了的话会直接贴代码，如果是后台的话就要。。。。。。

从视频中截取首帧作为封面图并展示出视频及封面图（canvas）相关推荐

使用ffmpeg从视频中截取图像帧（最简单实用的视频抽帧，一句命令）
Table of Contents 1.最佳方式 2.普通的命令:(画质差) 3. 视频旋转: 4. 批量视频抽帧: 参考:ffmpeg视频抽帧 1.最佳方式第二种方法抽帧图片画质很差,这里提供更好 ...
从视频中截取gif怎么弄？三步简单完成视频转gif制作
电影.电视剧等短视频充斥着我们的生活,很多小伙伴会将这些视频中的有趣画面提取出来做成Gif动画表情包.那么,怎么才能从视频中提取gif动画呢? 一.使用什么工具才能从视频中提取gif呢? 通过使用GI ...
php如何截取出视频中的指定帧作为图片
php如何截取出视频中的指定帧作为图片一.总结一句话总结:截取视频指定帧为图片,php ffmpeg扩展已经完美实现,并且php ffmpeg是开源的二.php如何截取出视频中的指定帧作为图片 ...
批量剪辑，截取视频中某一帧画面保存为图片
平时刷视频的时候看到好看的画面就想截图保存,那么如何批量提取视频中的某一帧画面呢?不知道怎么操作的朋友走过路过不要错过,小编分享一个方法演示具体的操作步骤,一起来看看. 运行[媒体梦工厂]这款软件中有 ...
教你在多个视频中随机抽帧画面出来，置入到各个视频封面上
通过抽帧在视频里随机抽取一幅画面图片出来,再次导入到各个视频上作为封面图片,这种的剪辑该如何操作呢?下面我们用一个媒体梦工厂剪辑的工具就可实现,一起看详细教程操作. 准备多个视频保存在同一文件夹中,可 ...
mpeg4视频中，I帧、p帧、B帧的判定
mpeg4视频中,I帧.p帧.B帧的判定 mpeg4的每一帧开头是固定的:00 00 01 b6,那么我们如何判断当前帧属于什么帧呢?在接下来的2bit,将会告诉我们答案.注意:是2bit,不是byt ...
ffmpeg 从现有视频中截取一段
ffmpeg 从现有视频中截取一段 1. ffmpeg -i ./input.mp4 -vcodec copy -acodec copy -ss 00:00:10 -to 00:00:25 ./out ...
python OpenCV 按时间间隔截取视频中任意片段帧
通过视频制作相应的数据集,截取视频中的任意片段帧. 使用python截取视频中的任意片段帧,直接上代码: import cv2 import os# 定义视频文件路径和保存图像文件路径 video_p ...
怎样在每个视频中随机抽帧一帧图片出来
最近很多人都在问如何在视频里随机抽帧一帧画面为图片出来呢?下面教大家一次性剪辑多个视频,一起来试试吧. 下载一个"媒体梦工厂"进入主界面,用到"视频封面"功能 ...

从视频中截取首帧作为封面图并展示出视频及封面图（canvas）

从视频中截取首帧作为封面图并展示出视频及封面图（canvas）相关推荐

最新文章

热门文章

从视频中截取首帧作为封面图 并展示出视频及封面图（canvas）

从视频中截取首帧作为封面图 并展示出视频及封面图（canvas）相关推荐

最新文章

热门文章

从视频中截取首帧作为封面图并展示出视频及封面图（canvas）

从视频中截取首帧作为封面图并展示出视频及封面图（canvas）相关推荐