Compare commits
2 Commits
5b7d239bdd
...
2f71fcf2f5
Author | SHA1 | Date |
---|---|---|
姚宇浩 | 2f71fcf2f5 | |
姚宇浩 | 1f7ce08341 |
|
@ -53,17 +53,9 @@
|
||||||
controls
|
controls
|
||||||
playsinline
|
playsinline
|
||||||
autoplay="autoplay"
|
autoplay="autoplay"
|
||||||
width="1080px"
|
|
||||||
>
|
>
|
||||||
<source :src="attachmentLink" type="application/x-mpegURL" />
|
<source :src="attachmentLink" type="application/x-mpegURL" />
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
<!-- <video width="1080" ref="video" controls>
|
|
||||||
<source
|
|
||||||
src="https://www.runoob.com/try/demo_source/mov_bbb.mp4"
|
|
||||||
type="video/mp4"
|
|
||||||
/>
|
|
||||||
</video> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
@ -72,17 +64,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import videojs from "video.js";
|
import videojs from "video.js";
|
||||||
import "video.js/dist/video-js.css";
|
import "video.js/dist/video-js.css";
|
||||||
|
import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
reactive,
|
|
||||||
onMounted,
|
|
||||||
defineProps,
|
|
||||||
onBeforeMount,
|
|
||||||
onBeforeUnmount,
|
|
||||||
watch,
|
|
||||||
nextTick,
|
|
||||||
} from "vue";
|
|
||||||
import { CircleCloseFilled } from "@element-plus/icons-vue";
|
import { CircleCloseFilled } from "@element-plus/icons-vue";
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
cameraShow: {
|
cameraShow: {
|
||||||
|
@ -91,24 +73,12 @@ const props = defineProps({
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// columns: {
|
hlsUriSsl: {
|
||||||
// type: Array,
|
type: String,
|
||||||
// default: () => {
|
default: () => {
|
||||||
// return [];
|
return '';
|
||||||
// },
|
},
|
||||||
// },
|
},
|
||||||
// tableData: {
|
|
||||||
// type: Array,
|
|
||||||
// default: () => {
|
|
||||||
// return [];
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// title: {
|
|
||||||
// type: String,
|
|
||||||
// default: () => {
|
|
||||||
// return "";
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
});
|
});
|
||||||
const emit = defineEmits(["close"]);
|
const emit = defineEmits(["close"]);
|
||||||
|
|
||||||
|
@ -120,38 +90,27 @@ const data = reactive({
|
||||||
tableData: [],
|
tableData: [],
|
||||||
});
|
});
|
||||||
|
|
||||||
// const videoElement = video.value;
|
|
||||||
// const videoSrc = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
|
|
||||||
|
|
||||||
const gridData = [];
|
const gridData = [];
|
||||||
// 监听
|
// 监听
|
||||||
watch(
|
watch(
|
||||||
() => props.cameraShow,
|
() => props.cameraShow,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
cameraShow.value = newVal;
|
cameraShow.value = newVal;
|
||||||
|
attachmentLink.value=props.hlsUriSsl;
|
||||||
|
nextTick(() => {
|
||||||
loadVideo();
|
loadVideo();
|
||||||
// data.columns = props.columns;
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
// watch(
|
|
||||||
// () => props.tableData,
|
|
||||||
// (newVal, oldVal) => {
|
|
||||||
// data.tableData = props.tableData;
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// const video = ref(null);
|
|
||||||
// // 创建对 videoPlayer 的引用
|
|
||||||
// const videoPlayer = ref(null);
|
|
||||||
// let player = null;
|
|
||||||
|
|
||||||
const dp = ref(null);
|
const dp = ref(null);
|
||||||
const videoElement = ref(null);
|
const videoElement = ref(null);
|
||||||
const attachmentLink = ref(
|
const attachmentLink = ref(
|
||||||
"https://test-streams.mux.dev/x36xhzz/url_6/193039199_mp4_h264_aac_hq_7.m3u8"
|
""
|
||||||
);
|
);
|
||||||
const options = {
|
const options = {
|
||||||
playbackRates: [0.7, 1.0, 1.5, 2.0],
|
playbackRates: [0.5, 1.0, 1.5, 2.0],
|
||||||
aspectRatio: "16:9",
|
aspectRatio: "10:5",
|
||||||
notSupportedMessage: "此视频暂无法播放,请稍后再试",
|
notSupportedMessage: "此视频暂无法播放,请稍后再试",
|
||||||
autoplay: false,
|
autoplay: false,
|
||||||
muted: true,
|
muted: true,
|
||||||
|
@ -160,41 +119,22 @@ const options = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadVideo = () => {
|
const loadVideo = () => {
|
||||||
if (videoElement.value) {
|
dp.value = videojs("videoPlayer", options);
|
||||||
dp.value = videojs(videoElement.value, options);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
// 使用生命钩子
|
// 使用生命钩子
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
cameraShow.value = props.cameraShow;
|
cameraShow.value = props.cameraShow;
|
||||||
|
|
||||||
loadVideo();
|
|
||||||
|
|
||||||
// data.columns = props.columns;
|
|
||||||
// data.title = props.title;
|
|
||||||
// data.tableData = props.tableData;
|
|
||||||
});
|
});
|
||||||
// onBeforeUnmount(() => {
|
|
||||||
// // if (player) {
|
|
||||||
// // player.dispose(); // 销毁播放器实例,释放资源
|
|
||||||
// // }
|
|
||||||
// if (dp.value) {
|
|
||||||
// dp.value.dispose();
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
const closeDialog = () => {
|
const closeDialog = () => {
|
||||||
cameraShow.value = false;
|
cameraShow.value = false;
|
||||||
|
if (dp.value) {
|
||||||
|
dp.value.dispose(); // dispose()会直接删除Dom元素
|
||||||
|
}
|
||||||
emit("close");
|
emit("close");
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.video-box {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
max-height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 暂停播放按钮居中
|
// 暂停播放按钮居中
|
||||||
::v-deep .video-js .vjs-big-play-button {
|
::v-deep .video-js .vjs-big-play-button {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
@ -208,7 +148,7 @@ const closeDialog = () => {
|
||||||
|
|
||||||
:deep(.el-dialog) {
|
:deep(.el-dialog) {
|
||||||
--el-dialog-bg-color: none;
|
--el-dialog-bg-color: none;
|
||||||
--el-dialog-width: 76% !important;
|
--el-dialog-width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-header {
|
.my-header {
|
||||||
|
|
|
@ -329,7 +329,12 @@
|
||||||
@handle="handlePaginationDialog"
|
@handle="handlePaginationDialog"
|
||||||
>
|
>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
<DialogCamera :cameraShow="cameraShow" @close="close1"> </DialogCamera>
|
<DialogCamera
|
||||||
|
:cameraShow="camera.show"
|
||||||
|
:hlsUriSsl="camera.hlsUriSsl"
|
||||||
|
@close="close1"
|
||||||
|
>
|
||||||
|
</DialogCamera>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -503,7 +508,11 @@ const paginationDialog = reactive({
|
||||||
});
|
});
|
||||||
const baseInfo = ref({});
|
const baseInfo = ref({});
|
||||||
const dialogShow = ref(false);
|
const dialogShow = ref(false);
|
||||||
const cameraShow = ref(false);
|
const camera = reactive({
|
||||||
|
show: false,
|
||||||
|
deviceCode: "",
|
||||||
|
hlsUriSsl: "",
|
||||||
|
});
|
||||||
const tableType = reactive({
|
const tableType = reactive({
|
||||||
url: "",
|
url: "",
|
||||||
//特殊标签
|
//特殊标签
|
||||||
|
@ -792,7 +801,7 @@ const close = () => {
|
||||||
dialogShow.value = false;
|
dialogShow.value = false;
|
||||||
};
|
};
|
||||||
const close1 = () => {
|
const close1 = () => {
|
||||||
cameraShow.value = false;
|
camera.show = false;
|
||||||
};
|
};
|
||||||
//右侧表格分页
|
//右侧表格分页
|
||||||
const handlePagination = (currentPage) => {
|
const handlePagination = (currentPage) => {
|
||||||
|
@ -841,7 +850,20 @@ const oneCardSolution = () => {
|
||||||
};
|
};
|
||||||
// 打开摄像头
|
// 打开摄像头
|
||||||
const openCamera = () => {
|
const openCamera = () => {
|
||||||
cameraShow.value = true;
|
getCameraUrl();
|
||||||
|
camera.show = true;
|
||||||
|
};
|
||||||
|
//获取摄像头地址
|
||||||
|
const getCameraUrl = () => {
|
||||||
|
// camera.deviceCode = dataMyTag.camera.sbbm;
|
||||||
|
camera.deviceCode = "3KSCP274757F2JU";
|
||||||
|
http
|
||||||
|
.get(`/api/ggfwyth/ysyzt/getPlayAddress?deviceCode=${camera.deviceCode}`)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
camera.hlsUriSsl = res.data.hlsUriSsl;
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
const back = () => {
|
const back = () => {
|
||||||
if (jump.value == "detail") {
|
if (jump.value == "detail") {
|
||||||
|
@ -859,6 +881,7 @@ watch(
|
||||||
onClickTag2("出生", "出生");
|
onClickTag2("出生", "出生");
|
||||||
jump.value = "map";
|
jump.value = "map";
|
||||||
getshs();
|
getshs();
|
||||||
|
getCameraUrl();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
@ -871,6 +894,7 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
onClickTag2("出生", "出生");
|
onClickTag2("出生", "出生");
|
||||||
getshs();
|
getshs();
|
||||||
|
getCameraUrl();
|
||||||
} else {
|
} else {
|
||||||
jump.value = "map";
|
jump.value = "map";
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue