哈哈

index.html

@@ -9,7 +9,8 @@
     <script src="https://api.map.baidu.com/api?v=3.0&ak=c0crhdxQ5H7WcqbcazGr7mnHrLa4GmO0"></script>
 
     <script src="/js/jessibuca-pro/jessibuca-pro.js"></script>
-    <script type="text/javascript" src="/js/EasyWasmPlayer.js"></script>
+    <!-- <script type="text/javascript" src="/js/EasyWasmPlayer.js"></script> -->
+    <script type="text/javascript" src="/js/EasyPlayer/EasyPlayer-pro.js"></script>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

src/views/pms/video_center/sip/components/player/deviceLiveStream.vue

@@ -44,7 +44,7 @@
 
 <script setup>
 import { ref, reactive, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
-import Player from './player.vue'
+import Player from './easyplayer.vue'
 
 import { startPlay, closeStream, listChannel } from '@/api/pms/video/channel'
 import { startPlayRecord } from '@/api/pms/video/record'

src/views/pms/video_center/sip/components/player/easyplayer.vue

@@ -1,3 +1,206 @@
 <template>
-    <div></div>
-</template>
+  <div ref="easyPlayerRef" style="width: 1000px; height: 630px; background-color: #000000"></div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
+
+// 响应式数据
+const easyPlayerRef = ref(null)
+let playerInfo = ref(null)
+
+const videoUrl = ref('')
+const isPlay = ref(false)
+
+const config = reactive({
+  hasAudio: true,
+  isLive: true,
+  MSE: false,
+  WCS: false
+})
+
+// 方法定义
+const play = async (url) => {
+  console.log('EasyPlayer 播放视频 url: ', url)
+  videoUrl.value = url
+  await onDestroy()
+  playCreate()
+  onPlayer()
+}
+
+const pause = () => {
+  onPause()
+}
+
+const destroy = () => {
+  onDestroy()
+}
+
+const registercallback = (events, func) => {}
+
+const onUse = (type) => {
+  if (type === 'hasAudio') {
+    config.hasAudio = !config.hasAudio
+  } else {
+    config.MSE = false
+    config.WCS = false
+    if (type === 'MSE') config.MSE = true
+    if (type === 'WCS') config.WCS = true
+  }
+  if (isPlay.value) {
+    onDestroy().then(() => {
+      playCreate()
+      onPlayer()
+    })
+  }
+}
+
+const setFullscreen = () => {
+  if (playerInfo.value) {
+    playerInfo.value.setFullscreen(true)
+  }
+}
+
+const onPause = () => {
+  if (playerInfo.value) {
+    playerInfo.value.pause()
+  }
+}
+
+const onMute = () => {
+  if (playerInfo.value) {
+    playerInfo.value.setMute(true)
+  }
+}
+
+const onPlayer = () => {
+  isPlay.value = true
+  nextTick(() => {
+    if (playerInfo.value) {
+      playerInfo.value
+        .play(videoUrl.value)
+        .then(() => {})
+        .catch((e) => {
+          console.error(e)
+        })
+    }
+  })
+}
+
+const onPlayerPlayback = () => {
+  onDestroy().then(() => {
+    playCreate()
+    config.isLive = false
+    nextTick(() => {
+      if (playerInfo.value) {
+        playerInfo.value
+          .play(videoUrl.value)
+          .then(() => {})
+          .catch((e) => {
+            console.error(e)
+          })
+      }
+    })
+  })
+}
+
+const onStop = async () => {
+  isPlay.value = false
+  await onDestroy()
+  playCreate()
+}
+
+const onDestroy = () => {
+  return new Promise((resolve) => {
+    if (playerInfo.value) {
+      playerInfo.value.destroy()
+      playerInfo.value = null
+    }
+    setTimeout(() => {
+      resolve()
+    }, 100)
+  })
+}
+
+const onReplay = async () => {
+  await onDestroy()
+  playCreate()
+  onPlayer()
+}
+
+const playCreate = () => {
+  const container = easyPlayerRef.value
+  if (!container) return
+
+  const easyplayer = new EasyPlayerPro(container, {
+    isLive: config.isLive,
+    bufferTime: 0.2,
+    stretch: false,
+    MSE: config.MSE,
+    WCS: config.WCS,
+    hasAudio: config.hasAudio,
+    watermark: { text: { content: '' }, right: 10, top: 10 },
+    isBand: true,
+    btns: {
+      play: true,
+      audio: true,
+      record: true,
+      zoom: true,
+      ptz: true,
+      quality: true,
+      stretch: false,
+      screenshot: true,
+      fullscreen: true
+    }
+  })
+
+  easyplayer.on('fullscreen', function (flag) {
+    console.log('is fullscreen', flag)
+  })
+
+  easyplayer.on('playbackRate', (rate) => {
+    easyplayer.setRate(rate)
+  })
+
+  easyplayer.on('playbackSeek', (data) => {
+    console.log('playbackSeek', data)
+  })
+
+  playerInfo.value = easyplayer
+}
+
+// 生命周期钩子
+onMounted(() => {
+  playCreate()
+})
+
+onBeforeUnmount(() => {
+  onDestroy()
+})
+
+defineExpose({
+  play,
+  pause,
+  destroy,
+  registercallback,
+  onUse,
+  setFullscreen,
+  onPause,
+  onMute,
+  onPlayer,
+  onPlayerPlayback,
+  onStop,
+  onReplay
+})
+</script>
+
+<style>
+.LoadingTitle {
+  min-width: 70px;
+}
+
+/* 隐藏logo */
+.iconqingxiLOGO {
+  display: none !important;
+}
+</style>