需求（实现的效果）
批量显示视频，后端若返回有imgUrl,则直接显示图1，
若无，则需要根据视频地址自己截取，截取中显示图2，
截取过程中如图3，截取完直接返回图片信息，如图1格式，未返回的仍显示加载动画，如图2
功能实现
需要使用插件播放、截取flv格式视频。当前使用的是mpegts.js
具体使用可移步 vue使用mpegts.js教程
html
<div
:key="ind"
v-for="(ite, ind) in objects"
class="description-content"
>
<div
v-if="ite.fileUrl"
class="imgurlExit"
>
<!-- 显示图片封面背景 -->
<img
v-if="ite.imgUrl"
:src="ite.imgUrl"
class="descriptionImg"
/>
<!-- 无图片、纯黑背景 -->
<div
class="descriptionImg"
v-else
></div>
<!-- 播放图标 -->
<a-icon
type="play-circle"
class="centerIcon"
v-if="ite.imgUrl"
/>
<!-- 加载动画 -->
<img
src="@/assets/images/initImg.gif"
class="centerIcon"
v-else
/>
</div>
<div
class="descriptionImg"
v-else
>
未抓取到视频
</div>
</div>
css
.description-content {
width: 220px;
margin: 0 20px;
margin-top: 20px;
.imgurlExit {
position: relative;
height: 180px;
.centerIcon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 40px;
}
}
.descriptionImg {
width: 220px;
height: 180px;
background: #000;
color: #fff;
font-weight: 800;
text-align: center;
line-height: 180px;
border-radius: 10px;
}
}
js
mpegts.js具体使用可移步 vue使用mpegts.js教程
import mpegts from "mpegts.js";
// 获取数据时进行判断 item.fileUrl存在且item.imgUrl不存在时。生成图片信息并返回更新数据
async getData() {
const res = await getList({
});
if (res.success) {
this.objects = res.data; //objects 为data中定义的数据
this.$nextTick(() => {
this.objects.map((item) => {
if (item.fileUrl && !item.imgUrl) {
this.getImage(item.fileUrl).then((res) => {
item.imgUrl = res;
});
}
});
});
}
},
// 获取视频的图片
getImage(url) {
return new Promise((resolve, reject) => {
const extension = url.split("."); //获取类型
const videoElement = document.createElement("video");
videoElement.muted = true; // 静音
videoElement.autoplay = true; // 自动播放
if (mpegts.isSupported()) {
// mpegts 具体用法可移步首页教程
const flvPlayer = mpegts.createPlayer(
{
type: extension[extension.length - 1],
url,
isLive: true,
isAutoPlay: true,
isContinue: true,
lazyLoad: true,
hasAudio: false,
},
{
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
}
);
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
setTimeout(() => {
flvPlayer
.play()
.then(() => {
this.destory(flvPlayer);
})
.catch((err) => {
this.destory(flvPlayer);
console.log("err", err);
});
});
}
// 监听视频数据加载事件
videoElement.addEventListener("loadeddata", function () {
// 播放及暂停
const canvasElement = document.createElement("canvas");
const ctx = canvasElement.getContext("2d");
canvasElement.width = 220;
canvasElement.height = 180;
// 绘制当前帧到 canvas
if (ctx) {
ctx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
}
const imageDataUrl = canvasElement.toDataURL();
resolve(imageDataUrl);
videoElement.pause();
// 移除video元素 注 document.createElemet创建的元素需要挂载到具体的dom才可以进行删除
document.body.appendChild(videoElement);
document.body.appendChild(canvasElement);
document.body.removeChild(videoElement);
document.body.removeChild(canvasElement);
});
});
},
// 销毁 mpegts 对象
destory(player) {
if (player) {
try {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
} catch (e) {
// console.log(e);
}
}
},
