From 293cc038aef227332161532621b97c987d1b1661 Mon Sep 17 00:00:00 2001 From: wangyawei <1796609990@qq.com> Date: 星期五, 18 四月 2025 14:19:53 +0800 Subject: [PATCH] 接入视频流 --- src/components/menu/TimeLine.vue | 137 +++++++++++++++++++++++++++++++-------------- 1 files changed, 93 insertions(+), 44 deletions(-) diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue index c18c8b1..4d0fb73 100644 --- a/src/components/menu/TimeLine.vue +++ b/src/components/menu/TimeLine.vue @@ -1,32 +1,21 @@ <template> <div class="timeline-container"> <div class="controls"> - <!-- <div @click="endSimulate">缁撴潫妯℃嫙</div> --> + <!-- <div @click="endSimulate">缁撴潫妯℃嫙</div> --> <div class="control-btn" @click="skipBackward"> - <img - src="@/assets/img/timeline/left.png" - class="fas fa-step-backward" - /> + <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" /> </div> <div class="control-btn play-btn" @click="togglePlay"> <img v-show="isPlaying" src="@/assets/img/timeline/stop.png" /> <img v-show="!isPlaying" src="@/assets/img/timeline/start.png" /> </div> <div class="control-btn" @click="skipForward"> - <img - src="@/assets/img/timeline/right.png" - class="fas fa-step-forward" - /> + <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" /> </div> <div class="speed-control"> <div @click="toggleSpeedMenu">{{ playbackRate }}X</div> <div class="speed-menu" v-show="showSpeedMenu"> - <div - v-for="rate in playbackRates" - :key="rate" - @click.capture="setPlaybackRate(rate)" - :class="{ active: playbackRate === rate }" - > + <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)" :class="{ active: playbackRate === rate }"> {{ rate }}X </div> </div> @@ -35,35 +24,24 @@ <div class="timeline"> <div class="dates"> - <div - v-for="(date, index) in visibleDates" - :key="index" - class="date-label" - > + <div v-for="(date, index) in visibleDates" :key="index" class="date-label"> {{ formatDate(date) }} </div> </div> <div class="timeline-track" ref="timelineTrack" @click="seekToPosition"> - <div - class="timeline-progress" - :style="{ width: progressPercentage + '%' }" - ></div> - <div - class="timeline-cursor" - :style="{ left: progressPercentage + '%' }" - ></div> + <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div> + <div class="timeline-cursor" :style="{ left: progressPercentage + '%' }"></div> <div class="time-markers"> - <div - v-for="(time, index) in timeMarkers" - :key="index" - class="time-marker" - > + <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker"> {{ time }} </div> </div> </div> </div> + <video id="video" width="200px" height="200px" controls loop autoplay style="display: none;" crossorigin="anonymous"> + <source src="/video/waters-1024.webm" type="video/webm" /> + </video> </div> </template> @@ -71,6 +49,7 @@ import { ref, computed, + nextTick, onUnmounted, onMounted, watch, @@ -118,6 +97,7 @@ return dayjs(props.waterSimulateParams.date[1]); }); let playInterval = null; +let hlsEntity = null; // 璁$畻灞炴�� const progressPercentage = computed(() => { @@ -142,7 +122,37 @@ const currentTimeFormatted = computed(() => { return formatTime(currentTime.value); }); +// 浣跨敤瑙嗛鍒涘缓Cesium瀹炰綋 +const createVideoEntity = () => { + // 鑾峰彇瑙嗛鍏冪礌 + const videoElement = document.getElementById('video'); + if (!videoElement) { + console.error("鏈壘鍒拌棰戝厓绱�"); + return; + } + // 绉婚櫎鍙兘瀛樺湪鐨勬棫瀹炰綋 + const existingEntity = window.earthCtrl.viewer.entities.getById('hls'); + if (existingEntity) { + window.earthCtrl.viewer.entities.remove(existingEntity); + } + + // 纭繚瑙嗛鍙 + videoElement.style.display = 'block'; + + // 鍒涘缓鏂扮殑瑙嗛瀹炰綋 + hlsEntity = window.earthCtrl.viewer.entities.add({ + id: 'hls', + rectangle: { + coordinates: window.SmartEarth.Cesium.Rectangle.fromDegrees( + 116.546665, 40.507452, 116.7757891, 40.6834562 + ), + material: videoElement, + outline: true, + outlineColor: window.SmartEarth.Cesium.Color.BLACK, + }, + }); +}; const togglePlay = () => { // 濡傛灉褰撳墠鏄仠姝㈢姸鎬佷笖宸茬粡鎾斁瀹屾瘯锛岀偣鍑绘椂閲嶇疆鏃堕棿 if (!isPlaying.value && currentTime.value >= duration.value) { @@ -153,15 +163,43 @@ isPlaying.value = !isPlaying.value; emit("isPlaying", isPlaying.value); - if (isPlaying.value) { - startPlayback(); - // 濡傛灉鏄粠澶村紑濮嬫挱鏀� - if (currentTime.value === 0) { - emit("playbackFinished", false); + // if (isPlaying.value) { + // startPlayback(); + // // 濡傛灉鏄粠澶村紑濮嬫挱鏀� + // if (currentTime.value === 0) { + // emit("playbackFinished", false); + // } + // } else { + // stopPlayback(); + // } + // 鏂板浠g爜:鍔犺棰戞祦 + nextTick(() => { + // 澶勭悊瑙嗛鎾斁 + const videoElement = document.getElementById('video'); + if (videoElement) { + if (isPlaying.value) { + // 纭繚宸插垱寤鸿棰戝疄浣� + createVideoEntity(); + // 鎾斁瑙嗛 + videoElement.play().catch(e => { + console.error("瑙嗛鎾斁澶辫触:", e); + }); + } else { + // 鏆傚仠瑙嗛 + videoElement.pause(); + } } - } else { - stopPlayback(); - } + + if (isPlaying.value) { + startPlayback(); + // 濡傛灉鏄粠澶村紑濮嬫挱鏀� + if (currentTime.value === 0) { + emit("playbackFinished", false); + } + } else { + stopPlayback(); + } + }); }; const startPlayback = () => { @@ -179,7 +217,13 @@ emit("isPlaying", isPlaying.value); // 閫氱煡鎾斁鐘舵�佸彉鍖� emit("playbackFinished", true); // 閫氱煡鎾斁瀹屾垚 emit("timeUpdate", progressPercentage.value); // 鏇存柊杩涘害鏉′綅缃� + // 鎾斁缁撴潫鏃舵殏鍋滆棰� + const videoElement = document.getElementById('video'); + if (videoElement) { + videoElement.pause(); + } } + // 鏆傚仠瑙嗛 emit("timeUpdate", progressPercentage.value); }, 1000); @@ -209,6 +253,11 @@ playbackRate.value = rate; showSpeedMenu.value = false; + // 鍚屾瑙嗛鎾斁閫熺巼 + const videoElement = document.getElementById('video'); + if (videoElement) { + videoElement.playbackRate = rate; + } if (isPlaying.value) { stopPlayback(); startPlayback(); @@ -239,7 +288,7 @@ }; const rainFallData = ref([]); -function getRainfallData() { +function getRainfallData () { getRainfall().then((res) => { // rainFallData.value = res.data.map(item => { // return dayjs(item.time).format("HH:mm") @@ -254,7 +303,7 @@ let mockTimer = null; let currentRainfall = ref(0.0001); -function randomMockWater() { +function randomMockWater () { let delay = (3 / playbackRate.value) * 1000; if (delay < 1000) { delay = 1000; @@ -271,7 +320,7 @@ if (rainfall && rainfall.total) { // console.log(rainfall.total); - createWaterPrimitive(rainfall.total / 50000); + // createWaterPrimitive(rainfall.total / 50000); } }, delay); } -- Gitblit v1.9.3