feat(video): 将实际视频播放与OSS源集成
向VideoMonitorItem组件添加视频元素以实现实时播放，更新视频监视器常量以使用OSS URL，并实现从OSS配置生成资源URL的工具函数。这将占位符内容替换为功能性的视频流。
This commit is contained in:
parent
ed230e69ab
commit
f60ecb002c
@ -11,7 +11,15 @@
|
||||
|
||||
<div class="video-monitor-item__content">
|
||||
<div class="video-placeholder">
|
||||
<!-- 这里放置实际的视频流组件 -->
|
||||
<!-- 视频播放器 -->
|
||||
<video
|
||||
:src="monitor.videoSrc"
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
/>
|
||||
|
||||
<div class="video-time">{{ currentTime }}</div>
|
||||
|
||||
<!-- 控制条：叠加在视频底部 -->
|
||||
@ -164,17 +172,15 @@ onUnmounted(() => {
|
||||
overflow: hidden;
|
||||
// margin-bottom: vh(12);
|
||||
|
||||
// 这里可以添加实际的视频组件
|
||||
&::before {
|
||||
content: '';
|
||||
// 视频元素
|
||||
video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: vw(48);
|
||||
height: vh(48);
|
||||
background: url(../../assets/images/SketchPngb3b734375de691a8ba794eee7807988d78f942877ab220ebea0aac3bbddccd8b.png) center/contain no-repeat;
|
||||
opacity: 0.3;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.video-time {
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
* 3D态势感知常量配置
|
||||
*/
|
||||
|
||||
import { getVideoUrl } from '@shared/utils'
|
||||
|
||||
// 视频监控视角类型
|
||||
export const VIDEO_TYPES = {
|
||||
PERSONNEL: 'personnel', // 单兵视角
|
||||
@ -16,7 +18,8 @@ export const VIDEO_MONITORS = [
|
||||
id: 1,
|
||||
type: VIDEO_TYPES.PERSONNEL,
|
||||
title: '单兵(张三三)设备视角',
|
||||
videoSrc: '/videos/personnel-001.mp4', // 视频源路径
|
||||
// videoSrc: getVideoUrl('demo/ylzg/单兵视角.mp4'), // 从 OSS 获取视频 URL
|
||||
videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/单兵视角.mp4',
|
||||
dateRange: '2025/9/1-2025/12/1', // 日期范围
|
||||
hasAudio: true,
|
||||
hasMegaphone: true,
|
||||
@ -27,7 +30,8 @@ export const VIDEO_MONITORS = [
|
||||
id: 2,
|
||||
type: VIDEO_TYPES.DRONE,
|
||||
title: '无人机(001)视角',
|
||||
videoSrc: '/videos/drone-001.mp4',
|
||||
// videoSrc: getVideoUrl('demo/ylzg/无人机视角.mp4'), // 从 OSS 获取视频 URL
|
||||
videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/无人机视角.mp4',
|
||||
dateRange: '2025/9/1-2025/12/1',
|
||||
hasAudio: false,
|
||||
hasMegaphone: true,
|
||||
@ -38,7 +42,8 @@ export const VIDEO_MONITORS = [
|
||||
id: 3,
|
||||
type: VIDEO_TYPES.VEHICLE_EXTERNAL,
|
||||
title: '指挥车外部视角',
|
||||
videoSrc: '/videos/vehicle-external-001.mp4',
|
||||
// videoSrc: getVideoUrl('demo/ylzg/单兵视角.mp4'), // 暂时使用单兵视角视频
|
||||
videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/单兵视角.mp4',
|
||||
dateRange: '2025/9/1-2025/12/1',
|
||||
hasAudio: true,
|
||||
hasMegaphone: true,
|
||||
@ -49,7 +54,8 @@ export const VIDEO_MONITORS = [
|
||||
id: 4,
|
||||
type: VIDEO_TYPES.VEHICLE_MEETING,
|
||||
title: '指挥车会议视角',
|
||||
videoSrc: '/videos/vehicle-meeting-001.mp4',
|
||||
// videoSrc: getVideoUrl('demo/ylzg/无人机视角.mp4'), // 暂时使用无人机视角视频
|
||||
videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/无人机视角.mp4',
|
||||
dateRange: '2025/9/1-2025/12/1',
|
||||
hasAudio: true,
|
||||
hasMegaphone: true,
|
||||
|
||||
@ -16,3 +16,31 @@ export const APP_CONFIG = {
|
||||
title: '数据大屏',
|
||||
version: '1.0.0'
|
||||
}
|
||||
|
||||
// OSS 配置
|
||||
// 注意: 实际使用时需要从配置中心或环境变量读取,此处为示例配置
|
||||
export const OSS_CONFIG = {
|
||||
// http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/%E5%8D%95%E5%85%B5%E8%A7%86%E8%A7%92.mp4
|
||||
// OSS 服务地址
|
||||
url: import.meta.env.VITE_OSS_URL || 'http://222.212.85.86:9000',
|
||||
// OSS bucket
|
||||
bucket: import.meta.env.VITE_OSS_BUCKET || '300bdf2b-a150-406e-be63-d28bd29b409f'
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 OSS 配置
|
||||
* @returns {{url: string, bucket: string}}
|
||||
*/
|
||||
export const getOssConfig = () => {
|
||||
const { url, bucket } = OSS_CONFIG
|
||||
|
||||
// 确保 URL 包含协议
|
||||
if (url.includes('http://') || url.includes('https://')) {
|
||||
return { url, bucket }
|
||||
} else {
|
||||
return {
|
||||
url: `http://${url}`,
|
||||
bucket
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { getOssConfig } from '../config'
|
||||
|
||||
/**
|
||||
* 格式化日期
|
||||
* @param {Date|string|number} date
|
||||
@ -73,3 +75,34 @@ export function deepClone(obj) {
|
||||
}
|
||||
return clonedObj
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 OSS 资源 URL
|
||||
* @param {string} path - OSS 对象路径,如 'demo/ylzg/单兵视角.mp4'
|
||||
* @returns {string} 完整的 OSS 资源 URL
|
||||
* @example
|
||||
* getAssetUrl('demo/ylzg/单兵视角.mp4')
|
||||
* // => 'http://183.221.225.106:9001/6251daf8-4127-40e0-980d-c86f8a765b20/demo/ylzg/单兵视角.mp4'
|
||||
*/
|
||||
export function getAssetUrl(path) {
|
||||
const { url, bucket } = getOssConfig()
|
||||
return `${url}/${bucket}/${path}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取视频 URL (getAssetUrl 的别名,用于语义化)
|
||||
* @param {string} path - 视频文件路径
|
||||
* @returns {string} 完整的视频 URL
|
||||
*/
|
||||
export function getVideoUrl(path) {
|
||||
return getAssetUrl(path)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取图片 URL (getAssetUrl 的别名,用于语义化)
|
||||
* @param {string} path - 图片文件路径
|
||||
* @returns {string} 完整的图片 URL
|
||||
*/
|
||||
export function getImageUrl(path) {
|
||||
return getAssetUrl(path)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user