<template>
|
<video ref="videoEle" class="video-js video-container"></video>
|
</template>
|
|
<script setup>
|
// import videoSrc from '@/assets/mp4/DJI_20250917140642_0001_V.mp4'
|
import { inputEmits } from 'element-plus'
|
import videojs from 'video.js'
|
import zhCN from 'video.js/dist/lang/zh-CN.json'
|
// 添加中文语言支持
|
videojs.addLanguage('zh-CN', zhCN)
|
import 'videojs-markers'
|
import EventBus from '@/utils/eventBus'
|
|
const videoEle = ref(null)
|
|
let player = null
|
|
const videoData = inject('videoData')
|
|
const init = async (vData, pData) => {
|
await nextTick()
|
|
if (!player) {
|
player = videojs(videoEle.value, {
|
html5: {
|
preload: 'auto', // 可选值：'auto', 'metadata', 'none'
|
},
|
controls: true, // 启用默认控件
|
playbackRates: [0.5, 1, 1.5, 2],
|
})
|
}
|
|
player.src(vData.play_url)
|
|
player.on('play', play)
|
|
player.on('pause', pause)
|
|
player.on('ratechange', ratechange)
|
|
player.on('error', error)
|
|
player.controlBar.playToggle.on('click', click)
|
|
player.on('seeked', seeked)
|
|
console.log(pData, vData, 1)
|
|
pData.length > 0 &&
|
player.markers({
|
showTime: false,
|
showTooltips: true,
|
markerStyle: {
|
'width': '6px',
|
'background-color': 'red',
|
},
|
markerTip: {
|
display: false,
|
},
|
onMarkerClick: marker => {
|
console.log(`点击了标记：${marker.text}`)
|
},
|
onMarkerReached: marker => {
|
console.log(`到达标记：${marker.text}`)
|
},
|
|
markers: pData.map((item, ind) => {
|
let className = 'ended'
|
|
switch (item.status) {
|
case 0:
|
className = 'pending'
|
break
|
|
case 2:
|
className = 'reviewed'
|
break
|
|
case 3:
|
className = 'processing'
|
break
|
|
case 4:
|
className = 'done'
|
break
|
|
case 5:
|
className = 'ended'
|
break
|
|
default:
|
className = 'noneEvent'
|
break
|
}
|
|
return {
|
time: getTimestampDiffInSeconds(item.metadata.createdTime, vData.start_time), // 标记时间，单位为秒
|
class: className,
|
}
|
}),
|
})
|
}
|
|
function play() {
|
console.log('播放按钮被点击')
|
// EventBus.emit('mapAnimationPlay')
|
}
|
|
function pause() {
|
console.log('暂停按钮被点击')
|
// EventBus.emit('mapAnimationPause')
|
}
|
|
function ratechange() {
|
console.log('播放速率已改变，当前速率: ' + player.playbackRate())
|
// EventBus.emit('mapAnimationSetSpeed', player.playbackRate())
|
}
|
|
let retryCount = 0
|
const maxRetries = 3
|
function error() {
|
if (player.error().code === 2 && retryCount < maxRetries) {
|
retryCount++
|
console.log(`尝试重新加载 (${retryCount}/${maxRetries})`)
|
setTimeout(() => player.src(player.currentSrc()), 2000)
|
}
|
}
|
|
function click() {
|
if (player.hasClass('vjs-ended')) {
|
console.log('重播按钮被点击')
|
// 执行重播相关操作
|
// EventBus.emit('mapAnimationReplay')
|
}
|
}
|
|
function seeked() {
|
const time = player.currentTime() * 1000 + videoData.value.videoStartTime
|
|
// EventBus.emit('mapAnimationSetCurrentTime', time)
|
}
|
|
onBeforeUnmount(() => {
|
if (player) {
|
player.dispose()
|
}
|
})
|
|
defineExpose({
|
init,
|
})
|
|
function getTimestampDiffInSeconds(timestamp1, timestamp2) {
|
// 计算两个时间戳的绝对差值（毫秒）
|
const diffInMilliseconds = Math.abs(timestamp1 - timestamp2)
|
|
// 将毫秒转换为秒
|
const diffInSeconds = diffInMilliseconds / 1000
|
|
return diffInSeconds
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.video-container {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
