xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-08-27 14:41:08 +08:00
parent 18809f588d
commit 136b3ede52
4 changed files with 50 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -1,18 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>公共服务一体化驾驶舱</title>
<script
type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2KLQUajGSpNL2DInxT6BwdPklMNpG3hw"
></script>
</head>
<body>
<div id="app"></div>
<!-- <script type="text/javascript" src="/baiduMap.js"></script> -->
<script type="module" src="/src/main.js"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>公共服务一体化驾驶舱</title>
<script type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2KLQUajGSpNL2DInxT6BwdPklMNpG3hw"></script>
<!-- 视频取流 -->
<link href="https://cdn.bootcss.com/video.js/7.20.3/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/7.20.3/video.js"></script>
<!-- <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> -->
</head>
<body>
<div id="app"></div>
<!-- <script type="text/javascript" src="/baiduMap.js"></script> -->
<script type="module" src="/src/main.js"></script>
</body>
</html>

18
src/view/dialog/dialogCamera.vue
View File

@ -67,6 +67,8 @@ import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';
videojs.addLanguage('zh-CN',VideojsZhcnLanguage);
// import Hls from 'hls.js';
// import 'videojs-contrib-hls';
@ -96,6 +98,7 @@ const dp = ref(null);
const attachmentLink = ref("");
const options = {
language: 'zh-CN',
playbackRates: [1.0],
aspectRatio: "10:5",
notSupportedMessage: "此视频暂无法播放，请稍后再试",
@ -169,10 +172,9 @@ const insertVideo = () => {
const loadVideo = () => {
if (dp.value) {
// console.log("正在销毁之前的video.js实例。");
dp.value.dispose();
// console.log("正在销毁之前的video.js实例。");
}
dp.value = videojs("videoPlayerInside", options);
// console.log("Video.js播放器已加载：", dp.value);
};
@ -181,24 +183,12 @@ const videoPlayer = ref(null);
// 使用生命钩子
onMounted(() => {
cameraShow.value = props.cameraShow;
// const videoElement = videoPlayer.value;
// if (Hls.isSupported()) {
// const hls = new Hls();
// hls.loadSource('http://live.zzbtv.com:80/live/live123/800K/tzwj_video.m3u8');
// hls.attachMedia(videoElement);
// videojs(videoElement);
// } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
// videoElement.src = 'http://live.zzbtv.com:80/live/live123/800K/tzwj_video.m3u8';
// videojs(videoElement);
// }
});
const disposeVideo = () => {
if (dp.value) {
dp.value.dispose(); // dispose()会直接删除Dom元素
dp.value = null;
// console.log("Video.js播放器已处理。");
}
};

33
src/view/dialog/dialogCameras.vue
View File

@ -63,10 +63,14 @@
</div>
</template>
<script setup>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
// import 'videojs-contrib-hls';
import VideojsZhcnLanguage from "video.js/dist/lang/zh-CN.json";
videojs.addLanguage("zh-CN", VideojsZhcnLanguage); //中文设置
const props = defineProps({
cameraShow: {
type: Boolean,
@ -122,11 +126,11 @@ watch(
console.log(22222, document.getElementById("videoBox"));
insertVideo();
}
nextTick(() => {
setTimeout(() => {
loadVideo();
}, 1000);
});
// nextTick(() => {
setTimeout(() => {
loadVideo();
}, 1000);
// });
}
}
);
@ -148,6 +152,7 @@ const dp = ref(null);
const videohtml = ref("");
const attachmentLink = ref("");
const options = {
language: "zh-CN",
playbackRates: [1.0],
aspectRatio: "10:5",
notSupportedMessage: "此视频暂无法播放，请稍后再试",
@ -155,15 +160,23 @@ const options = {
muted: true,
preload: "auto",
controls: true,
hls:{
}
hls: {},
};
const loadVideo = () => {
if (videoPlayer) {
dp.value = videojs("videoPlayer", options);
}
videojs.hook("beforeerror", (player, err) => {
// Video.js 在切换/指定 source 后立即会触发一个 err=null 的错误，这里过滤一下
console.log("播放器实例", player, err);
if (err !== null) {
dp.value.src(url);
}
// 清除错误，避免 error 事件在控制台抛出错误
return null;
});
};
// 使用生命钩子
onMounted(() => {

2
src/view/sy_map.vue
View File

@ -3607,7 +3607,7 @@ const reset_font2 = () => {
"scale(" + width / 1920 + "," + height / 1080 + ")";
};
onMounted(async () => {
// tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
loadingss.value = true;
reset_font();
initMap();