89 lines
2.1 KiB
Vue
89 lines
2.1 KiB
Vue
<!--
|
|
* @Author: SunTao 328867980@qq.com
|
|
* @Date: 2024-11-15 14:23:21
|
|
* @LastEditors: SunTao 328867980@qq.com
|
|
* @LastEditTime: 2024-12-03 13:35:29
|
|
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-view.vue
|
|
* @Description: 总览大屏-巡检车辆-视频查看弹窗
|
|
-->
|
|
|
|
<template>
|
|
<div class="view-content">
|
|
<video
|
|
id="mmiid"
|
|
class="video-js vjs-big-play-centered vjs-fluid"
|
|
controls
|
|
preload="auto"
|
|
width="100%"
|
|
height="100%"
|
|
></video>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getVideoUrl } from "@/api/xj/screen/disease-screen";
|
|
export default {
|
|
name: "InspectionView",
|
|
props: {
|
|
dialogItem: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
// 视频播放地址
|
|
vedioUrl: "",
|
|
};
|
|
},
|
|
created() {
|
|
this.getVideo();
|
|
},
|
|
methods: {
|
|
/* 获取视频url地址 */
|
|
getVideo() {
|
|
// 获取视频流地址
|
|
getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
|
|
if (code === 200) {
|
|
// 判断视频流地址是否存在
|
|
if (!data) {
|
|
this.$message.error('获取视频流失败');
|
|
return;
|
|
}
|
|
|
|
// 创建 flv.js 播放器
|
|
if (flvjs.isSupported()) {
|
|
const flvPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
url: "http://1011.hlsplay.aodianyun.com/demo/game.flv",
|
|
isLive: true,
|
|
hasAudio: true,
|
|
hasVideo: true
|
|
});
|
|
|
|
flvPlayer.attachMediaElement(document.querySelector("#mmiid"));
|
|
flvPlayer.load();
|
|
flvPlayer.play();
|
|
} else {
|
|
this.$message.error('当前浏览器不支持FLV播放');
|
|
}
|
|
}
|
|
});
|
|
|
|
// getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
|
|
// if (code === 200) {
|
|
// console.log(data, "data");
|
|
// }
|
|
// });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.view-content {
|
|
width: 100%;
|
|
height: 40rem;
|
|
}
|
|
</style>
|