// 264,265视频格式可用
let res = await axios({
method: "get",
url: 请求地址,
responseType: "arraybuffer",
});
const bufferUrl = btoa(
new Uint8Array(res.data).reduce(
(data, byte) => data + String.fromCharCode(byte),
""
)
);
this.imgUrl = "data:image/png;base64," + bufferUrl;
// m3u8视频格式可用(播放完了才能取视频封面)
// m3u8视频格式单独播放
if (this.video.deviceType == 5) {
if (Hls.isSupported()) {
this.m3u8Player = "video" + this.video.id;
// 获取 video 标签
this.nativeVideo = document.getElementById(this.m3u8Player);
// 实例化 Hls 对象
var hls = new Hls();
// 传入路径
hls.loadSource(this.video.ysLiveAddress);
hls.attachMedia(this.nativeVideo);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
this.nativeVideo.play(); // 调用播放 API
console.log(this.showCover);
});
} else {
alert("不支持HLS");
}
if (this.showCover) {
setTimeout(() => {
// 创建一个<canvas>元素
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
// 设置<canvas>的宽高与视频一致
canvas.width = this.nativeVideo.videoWidth;
canvas.height = this.nativeVideo.videoHeight;
// 将视频帧绘制到<canvas>
ctx.drawImage(this.nativeVideo, 0, 0, canvas.width, canvas.height);
// 将<canvas>转换为图片
var imgDataUrl = canvas.toDataURL("image/png");
this.imgUrl = imgDataUrl;
if (imgDataUrl == "data:,") this.noVideoPlayHiddenImg = true;
// 关掉视频展示封面
this.nativeVideo && this.nativeVideo.pause();
this.showVideo = false;
}, 1000);
}
}