This commit is contained in:
duanxiaohai
parent
18809f588d
commit
136b3ede52
36
index.html
36
index.html
|
|
@ -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>
|
||||
|
||||
<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>
|
||||
|
|
@ -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播放器已处理。");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue