技术标签: css java js html javascript
最近在搬砖时遇到一个问题,在商详页面有些商品只有视频,没有封面图。
我们的交互是用户点击视频封面图调用 native
播放器播放视频,没有封面图视频就没有了载体,就不能展示了。
这个问题有3个解决方案
后端处理:这种方案虽然可行,但是会影响接口性能,在商详这种关键页面得不偿失。
客户端处理:客户端处理需要在进入商详页面前预加载视频,会影响页面响应速度,也不太合理。
前端处理:前端处理必然会用到 video 标签来承载视频,考虑到 video 标签在移动端会有很多兼容性问题,处理起来很复杂,同时也会带来加载的性能消耗。
基于上述三个方案,我们决定在源头解决这个问题,在创建商品时动态获取视频封面并保存。
考虑到这是一个公共能力,我们把处理逻辑写成公共的 npm
包 video-cover
(https://www.npmjs.com/package/video-cover) ,有兴趣的可以去 npm
上下载和使用。
接下来给大家分享一下这个包的实现方案和使用方法。
首先我们看下实际使用效果。
获取视频首帧整体过程是比较流畅的,当然,具体的获取时间取决于视频的质量和网速。
动态创建 video 标签,加载视频。通过 video 的 timeupdate
事件来获取截取图片的时机。
创建 canvas 画布,通过 drawImage
来绘制图像,然后通过 toDataURL
来导出图像信息。
最后封装一些功能方法来方面使用。
canvas 对我们来说是一个熟悉又陌生的技术,在一些技术文档种经常有它的身影出现,但是业务中使用到的地方又不是很多。
要使用这个技术,首先我们来看下兼容性,兼容性不好的话再好的技术也难以运用到业务中去。
从上图看来大部分浏览器兼容性没问题,话不多说,开始上代码
首先我们要创建
video
标签,这步是关键,图像能不能截取成功就取决于视频能不能展示了。
如果你使用的是网络图片,并且是跨域的。
必须要设置 video
的 crossOrigin = 'Anonymous'
,对此元素的 CORS
请求将不设置凭据标志。
否则使用canvas的 toDataURL
api会报错 提示:
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
大概意思就是画布被污染。
文档:参考文档[1]
getVideoCover(callback) {
const self = this;
const video = this.video || document.createElement("video");
const currentTime = self.currentTime;
video.src = self.url;
video.style.cssText = `position: fixed; top: -100%; width: 400px; visibility: hidden;`;
video.controls = "controls";
// 此处是设置跨域,防止污染canvas画布
video.crossOrigin = "Anonymous";
// 设置视频播放进度
video.currentTime = currentTime;
// 监听播放进度改变,获取对应帧的截图
video.addEventListener("timeupdate", () => {
self.setVideoInfo();
if (self.currentTime <= self.duration) {
self.generateCanvas(callback);
} else {
self.nextTime()
}
});
this.video = video;
// 此处必须要append到页面中去,否则会由兼容性问题
document.body.appendChild(video);
}
通过修改 video
的 currentTime
属性,来切换视频的进度,从而触发 timeupdate
事件,完成截图操作。
创建完 video
,接下来就是最关键的部分了,图片生成。
主要思路:
首先创建一个 canvas
。
添加对应的尺寸,这个尺寸尽量和视频的比例保持一致,否则生成的图片会变形。
通过 toDataURL
生成 base64
,直接在页面展示就可以了。
generateCanvas(callback) {
const self = this;
const canvas = this.canvas || document.createElement("canvas");
// 此处添加 alpha 属性,可以忽略透明度,减少图片体积
const ctx = canvas.getContext("2d", { alpha: false });
const imgWidth = this.imgWidth;
const isCheckImageColor = this.isCheckImageColor;
let videoWidth = this.videoWidth;
let videoHeight = this.videoHeight;
if (!this.canvas) {
if (imgWidth) {
videoHeight = imgWidth / (videoWidth / videoHeight);
videoWidth = imgWidth;
}
canvas.width = videoWidth;
canvas.height = videoHeight;
}
ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);
// 如果开启图片校验模式
if (isCheckImageColor) {
const checkImageResult = this.checkImage(ctx, videoWidth, videoHeight);
// 如果图片是纯色图片,会获取切换播放时间,获取下一秒的截图
if (!checkImageResult) {
this.nextTime();
return;
}
}
const img = canvas.toDataURL(this.imageType, self.quality);
callback && callback(img);
}
写到此处,基本的功能已经实现了,接下来就介绍一些工具方法来让我们的功能更加的完善。
图片内容校验。
有些视频的前 1s 是黑屏,这样截下来的图片是没有任何价值的,为了避免这种问题。我对视频做了是否是纯色的校验。
使用 canvas
的 getImageData
来获取图片像素信息。
getImageData
会返回一个 Uint8ClampedArray
的类型化数组。
每一个值存储的是 0-255 的整型。
每4个为一组,分别代表 R G B A。
遍历整个数组,如果发现颜色值的种类超过配置的数量,即为有图像的图,否则为纯色图。
如果大家有更好的处理方案,欢迎在评论区域留言。
checkImage(ctx, width, height) {
const imgData = ctx.getImageData(0, 0, width, height);
const imgDataContent = imgData.data;
const rgbObj = {};
let differentLen = 0;
for (let i = 0, len = imgDataContent.length; i < len; i += 4) {
const key = imgDataContent.slice(i, i + 4).join("");
if (!rgbObj[key]) {
rgbObj[key] = 1;
differentLen++;
}
// 判断如果颜色超出100种,不是纯图
if (differentLen > 100) {
return true;
}
}
return false;
}
base64
转 Blob
对象。
图片本地下载和保存到服务器都需要将base64转换成 Blob对象。
具体实现步骤为:
static base64ToBlob(code) {
if (!code) {
console.warn("base64不能为空");
return;
}
let parts = code.split(";base64,");
// 获取图片类型
let contentType = parts[0].split(":")[1];
/**
* 解码base64
* Window atob() 方法
* encodedStr: 必需,是一个通过 btoa() 方法编码的字符串。
* 该方法返回一个解码的字符串。
*/
let raw = window.atob(parts[1]);
let rawLength = raw.length;
// Uint8Array 数组类型表示一个8位无符号整型数组,创建时内容被初始化为0。
let uInt8Array = new Uint8Array(rawLength);
// 将字符转换成unicode值
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType,
});
}
通过 window.atob
方法将 base64
解码。
初始化一个 Uint8Array
类型化数组。
遍历解码之后的 base64
,将每个字符转换成 Unicode
码,并 push
到 Uint8Array
中。
最后通过 new Blob()
来生成 Blob
对象。
下载文件
static downloadFile(code) {
const fileName = Date.now();
if (!code) {
console.warn("base64不能为空");
return;
}
let aLink = document.createElement("a");
let blob = this.base64ToBlob(code);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.click();
}
接下来介绍下使用方法
通过 new VideoCover()
来初始化配置信息
const cover = new VideoCover({
// 视频链接
url: 'https://cdn.huodao.hk/zhaoliangjiadv2.mp4',
// 初始截图位置,取值范围 1- 视频长度,默认为 1
currentTime: 1,
// 生成图片宽度,高度按照视频比例自动计算,默认为800px
imgWidth: 600,
// 图片质量,范围 0.2-0.95,默认为 0.95
quality: 0.9,
// 图片类型,默认为 image/jpeg
imageType: 'image/jpeg',
// 是否开始图片检查,如果为纯图自动获取下一秒,默认为false
isCheckImageColor: true,
})
api方法
生成截图
getVideoCover
参数:
@param { Function } callback 回调函数 示例:
cover.getVideoCover((res) => {
console.log(res)
})
获取下一秒视频截图 nextTime 参数:无 示例:
cover.nextTime()
获取指定位置视频截图 jumpTime 参数:@param { Number } time 时间秒数 示例:
cover.jumpTime(20)
最后试了一下,在 chrome,firefox
等主流浏览器都是可以的。
由于 video
在移动端的兼容性不是很好,此插件适用于 PC
端。
未来我们会兼容移动端,希望能在更多的平台得到运用。
本文源码:https://github.com/18823752727/video-cover
npm包地址:https://www.npmjs.com/package/video-cover
参考文档:
安全性和“被污染”的 canvas
https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image
Uint8Array
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array
Blob
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob
Base64的编码与解码
https://developer.mozilla.org/zh-CN/docs/Glossary/Base64
createObjectURL https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
文章浏览阅读4.9k次。Sublime text 3搭建Python开发环境及常用插件安装_sublime python 环境搭建
文章浏览阅读643次。MySQL在首次安装后会执行一个安全脚本,用于设置root用户的密码以及其他安全选项。_centos7安装mysql8.0gpg密钥
文章浏览阅读864次。这种场景下,可以使用两个系列,一个系列是完整的图形,当做『背景』来表达总数值,另一个系列是使用 `symbolClip` 进行剪裁过的图形,表达当前数值。_echarts symbolboundingdata
文章浏览阅读1k次,点赞18次,收藏16次。这篇文章主要介绍了学python对电脑配置要求高吗,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获,下面让小编带着大家一起了解一下。_python机器学习需要怎样配置的电脑
文章浏览阅读3.9k次。Datawhale开源开源方向:OCR开源项目01导读OCR方向的工程师,之前一定听说过PaddleOCR这个项目,其主要推荐的PP-OCR算法更是被国内外企业开发者广泛应用,短短半年..._github 2023年最新表格ocr
文章浏览阅读317次。【竞赛+作品集,点燃你的设计理想】设计课开题啦!百川柯纳陆续推出以国际设计竞赛项目为参考的设计题目让大家参与,借此丰富履历,充实作品集。本期的设计题目为:Parameterized Complexities参数化建筑设计。喜欢参数化的小伙伴,你们兴奋吗?Parameterized Complexities 选题背景 近期不断有小伙伴在后台给我们留言,或者咨询百川柯纳顾问老师表达希望能够参加以“参数..._python 建筑平面图
文章浏览阅读1k次。ATF点滴1、设置运行时栈SP2、寄存器的保存和恢复的实现3、寄存器的保存和恢复的使用场景1、设置运行时栈SPbl31_entrypoint—>el3_entrypoint_common---->plat_set_my_stack—>platform_set_stack—>platform_get_stack动态找到该cpufunc platform_set_stackmov x9, x30 // lrbl platform_get_stackmov sp, x0r_atf-tee
文章浏览阅读134次。300多个各种类型的PPT模板下载,为您提供各种类型PPT模板、PPT图片、PPT素材、海报模板、新媒体配图等内容下载。
文章浏览阅读546次。主要功能有:保安保洁管理、报修管理、房产信息管理、公告管理、管理员信息管理、业主信息管理、登录管理。_智能化哪些系统需要数据库
文章浏览阅读69次。本期年度书单,带大家盘点一下本年度图灵最受欢迎的套装图书,以前买套装书是为了凑单,如今套装书买回去不仅有一次性就能读完的酣畅感还极具收藏价值。一本好书往往要经过时间的验证,而阅读又是一种隐私,每个人的喜好大有不同,但能够集齐每个人的喜爱,这往往就是经典的诞生。今天这份书单里,有自成体系的套系书,还有一些因读者需求而产生的组成套系书。但不管哪种形式,它们都解决了读者在学习某些方面遇到的问题,也给大家...
文章浏览阅读809次。这个脚本的输入参数有三个:1.data/mfcc/train 2.exp/make_mfcc/train 3.mfcc/train1.data/mfcc/train中有数据预处理后的一些文件:phone.txt spk2utt text utt2spk wav.scp word.txt2.exp/make_mfcc/train中应该是要保存程序运行的日志文件的3.mfcc/train中是提取出的特征文件1是输入目录,2,3是输出目录#!/bin/bash# Copyright 2012-2_thch30
文章浏览阅读2.5k次。如图所示:在jsp中引入: Style.css 代码:.myOtherGridCell { font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px; color:black; border-bottom:1px solid #a0a0a0;border-right:1px solid_listgrid添加样式