130 lines
4.4 KiB
Vue
130 lines
4.4 KiB
Vue
<!--
|
||
* @Author: SunTao 328867980@qq.com
|
||
* @Date: 2024-11-15 14:23:21
|
||
* @LastEditors: SunTao 328867980@qq.com
|
||
* @LastEditTime: 2024-12-03 14:14:14
|
||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-view.vue
|
||
* @Description: 总览大屏-巡检车辆-视频查看弹窗
|
||
-->
|
||
|
||
<template>
|
||
<div class="view-content">
|
||
<video
|
||
id="videoElement"
|
||
crossOrigin="anonymous"
|
||
controls
|
||
autoplay
|
||
muted
|
||
width="100%"
|
||
height="800px"
|
||
></video>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getVideoUrl } from "@/api/xj/screen/disease-screen";
|
||
import flvjs from "flv.js";
|
||
export default {
|
||
name: "InspectionView",
|
||
props: {
|
||
dialogItem: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
// 视频播放地址
|
||
vedioUrl: "",
|
||
isPlay: false,
|
||
player: null,
|
||
timerId: null,
|
||
};
|
||
},
|
||
created() {
|
||
this.getVideo();
|
||
},
|
||
methods: {
|
||
/* 获取视频url地址 */
|
||
getVideo() {
|
||
getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, msg }) => {
|
||
if (code === 200) {
|
||
this.$nextTick(() => {
|
||
this.createVideo(msg);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
createVideo(url) {
|
||
if (flvjs.isSupported()) {
|
||
const videoElement = document.getElementById("videoElement");
|
||
this.player = flvjs.createPlayer(
|
||
{
|
||
type: "flv",
|
||
isLive: true,
|
||
hasAudio: false,
|
||
url, // 自己的flv视频流
|
||
enableWorker: false, //启用 Web Worker 进程来加速视频的解码和处理过程
|
||
stashInitialSize: 32 * 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
|
||
stashInitialTime: 2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
|
||
seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
|
||
lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
|
||
lazyLoadMaxDuration: 2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
|
||
deferLoadAfterSourceOpen: false,
|
||
},
|
||
{
|
||
cors: true, // 是否跨域
|
||
// enableWorker: true, // 是否多线程工作
|
||
enableStashBuffer: false, // 是否启用缓存
|
||
// stashInitialSize: 128, // 缓存大小(kb) 默认384kb
|
||
autoCleanupSourceBuffer: true, // 是否自动清理缓存
|
||
}
|
||
);
|
||
this.player.attachMediaElement(videoElement); //挂载元素
|
||
this.player.load(); //加载流
|
||
this.player.play(); //播放流
|
||
// 追帧
|
||
// if (this.timerId !== null) {
|
||
// clearInterval(this.timerId);
|
||
// }
|
||
// this.timerId = setInterval(() => {
|
||
// if (videoElement.buffered.length > 0) {
|
||
// const end = videoElement.buffered.end(0); // 视频结尾时间
|
||
// const current = videoElement.currentTime; // 视频当前时间
|
||
// const diff = end - current; // 相差时间
|
||
// // console.log(diff);
|
||
// const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
|
||
// const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
|
||
// const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
|
||
// let playbackRate = 1.0; // 播放速度
|
||
// if (diff > diffCritical) {
|
||
// // console.log("相差超过4秒，进行跳转");
|
||
// videoElement.currentTime = end - 1.5;
|
||
// playbackRate = Math.max(1, Math.min(diffCritical, 16));
|
||
// } else if (diff > diffSpeedUp) {
|
||
// // console.log("相差超过1秒，进行加速");
|
||
// playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
|
||
// }
|
||
// videoElement.playbackRate = playbackRate;
|
||
// if (videoElement.paused) {
|
||
// this.videoForm.player.play();
|
||
// }
|
||
// }
|
||
// }, 1000);
|
||
}
|
||
},
|
||
},
|
||
|
||
destroyed() {
|
||
clearInterval(this.timerId);
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.view-content {
|
||
width: 100%;
|
||
height: 40rem;
|
||
}
|
||
</style>
|