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

36
index.html
View File

@ -1,18 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" /> <head>
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<title>公共服务一体化驾驶舱</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script <title>公共服务一体化驾驶舱</title>
type="text/javascript" <script type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2KLQUajGSpNL2DInxT6BwdPklMNpG3hw" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2KLQUajGSpNL2DInxT6BwdPklMNpG3hw"></script>
></script> <!-- 视频取流 -->
</head> <link href="https://cdn.bootcss.com/video.js/7.20.3/alt/video-js-cdn.min.css" rel="stylesheet">
<body> <script src="https://cdn.bootcss.com/video.js/7.20.3/video.js"></script>
<div id="app"></div> <!-- <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> -->
<!-- <script type="text/javascript" src="/baiduMap.js"></script> -->
<script type="module" src="/src/main.js"></script> </head>
</body>
<body>
<div id="app"></div>
<!-- <script type="text/javascript" src="/baiduMap.js"></script> -->
<script type="module" src="/src/main.js"></script>
</body>
</html> </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 { CircleCloseFilled } from "@element-plus/icons-vue";
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 VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';
videojs.addLanguage('zh-CN',VideojsZhcnLanguage);
// import Hls from 'hls.js'; // import Hls from 'hls.js';
// import 'videojs-contrib-hls'; // import 'videojs-contrib-hls';
@ -96,6 +98,7 @@ const dp = ref(null);
const attachmentLink = ref(""); const attachmentLink = ref("");
const options = { const options = {
language: 'zh-CN',
playbackRates: [1.0], playbackRates: [1.0],
aspectRatio: "10:5", aspectRatio: "10:5",
notSupportedMessage: "此视频暂无法播放，请稍后再试", notSupportedMessage: "此视频暂无法播放，请稍后再试",
@ -169,10 +172,9 @@ const insertVideo = () => {
const loadVideo = () => { const loadVideo = () => {
if (dp.value) { if (dp.value) {
// console.log("正在销毁之前的video.js实例。");
dp.value.dispose(); dp.value.dispose();
// console.log("正在销毁之前的video.js实例。");
} }
dp.value = videojs("videoPlayerInside", options); dp.value = videojs("videoPlayerInside", options);
// console.log("Video.js播放器已加载：", dp.value); // console.log("Video.js播放器已加载：", dp.value);
}; };
@ -181,24 +183,12 @@ const videoPlayer = ref(null);
// 使用生命钩子 // 使用生命钩子
onMounted(() => { onMounted(() => {
cameraShow.value = props.cameraShow; 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 = () => { const disposeVideo = () => {
if (dp.value) { if (dp.value) {
dp.value.dispose(); // dispose()会直接删除Dom元素 dp.value.dispose(); // dispose()会直接删除Dom元素
dp.value = null; dp.value = null;
// console.log("Video.js播放器已处理。");
} }
}; };

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

@ -63,10 +63,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue"; import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-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({ const props = defineProps({
cameraShow: { cameraShow: {
type: Boolean, type: Boolean,
@ -122,11 +126,11 @@ watch(
console.log(22222, document.getElementById("videoBox")); console.log(22222, document.getElementById("videoBox"));
insertVideo(); insertVideo();
} }
nextTick(() => { // nextTick(() => {
setTimeout(() => { setTimeout(() => {
loadVideo(); loadVideo();
}, 1000); }, 1000);
}); // });
} }
} }
); );
@ -148,6 +152,7 @@ const dp = ref(null);
const videohtml = ref(""); const videohtml = ref("");
const attachmentLink = ref(""); const attachmentLink = ref("");
const options = { const options = {
language: "zh-CN",
playbackRates: [1.0], playbackRates: [1.0],
aspectRatio: "10:5", aspectRatio: "10:5",
notSupportedMessage: "此视频暂无法播放，请稍后再试", notSupportedMessage: "此视频暂无法播放，请稍后再试",
@ -155,15 +160,23 @@ const options = {
muted: true, muted: true,
preload: "auto", preload: "auto",
controls: true, controls: true,
hls:{ hls: {},
}
}; };
const loadVideo = () => { const loadVideo = () => {
if (videoPlayer) { if (videoPlayer) {
dp.value = videojs("videoPlayer", options); 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(() => { onMounted(() => {

2
src/view/sy_map.vue
View File

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