js获取视频帧图片

//网上的攻略很多,但是搁我这就是不行,搞了老久了,然后才发现需要设置视频时长,不然永远都是白屏,烦死了,

//至于跨域,呵呵,麻了麻了。反正我是跨不过去

function getVideoBase64(url) {
	return new Promise(function(resolve, reject) {
		let dataURL = '';
		let video = document.createElement("video");
		video.setAttribute('crossorigin', 'anonymous'); //处理跨域
		video.setAttribute('src', url);
		video.setAttribute('width', 400);
		video.setAttribute('height', 240);
		video.setAttribute('controls', 'controls');
		video.currentTime = 7  //视频时长,一定要设置,不然大概率白屏
		video.addEventListener('loadeddata', function(e) {
			let canvas = document.createElement("canvas"),
			width = video.width, //canvas的尺寸和图片一样
			height = video.height;
			canvas.width = width;
			canvas.height = height;
			canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
			dataURL = canvas.toDataURL('image/png'); //转换为base64
			var img = document.createElement("img");
			img.src = dataURL
			video.setAttribute('poster', dataURL);
			resolve(dataURL);
		});
	})
}

getVideoBase64(src).then(res=>{
	img.src = res  //你懂的(@——_——@)
})

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值