Commit 8bc2e91eb1f565aa84eb18e3162d8de5d478033c
Merge branch 'fix/DEFECT-1968' into 'main_dev'
fix: 修复播放状态与控制状态不一致 See merge request yunteng/thingskit-front!1273
Showing
2 changed files
with
23 additions
and
0 deletions
| @@ -20,6 +20,9 @@ | @@ -20,6 +20,9 @@ | ||
| 20 | 20 | ||
| 21 | const emits = defineEmits<{ | 21 | const emits = defineEmits<{ |
| 22 | (eventName: 'ready', player: PresetPlayer): void; | 22 | (eventName: 'ready', player: PresetPlayer): void; |
| 23 | + (eventName: 'play', player: PresetPlayer): void; | ||
| 24 | + (eventName: 'pause', player: PresetPlayer): void; | ||
| 25 | + (eventName: 'ended', player: PresetPlayer): void; | ||
| 23 | (eventName: 'onUnmounted', player: PresetPlayer): void; | 26 | (eventName: 'onUnmounted', player: PresetPlayer): void; |
| 24 | }>(); | 27 | }>(); |
| 25 | 28 | ||
| @@ -116,6 +119,18 @@ | @@ -116,6 +119,18 @@ | ||
| 116 | onDecodeError(); | 119 | onDecodeError(); |
| 117 | } | 120 | } |
| 118 | }); | 121 | }); |
| 122 | + | ||
| 123 | + player.on(Events.PAUSE, () => { | ||
| 124 | + emits('pause', player); | ||
| 125 | + }); | ||
| 126 | + | ||
| 127 | + player.on(Events.ENDED, () => { | ||
| 128 | + emits('ended', player); | ||
| 129 | + }); | ||
| 130 | + | ||
| 131 | + player.on(Events.PLAY, () => { | ||
| 132 | + emits('play', player); | ||
| 133 | + }); | ||
| 119 | } | 134 | } |
| 120 | 135 | ||
| 121 | onMounted(() => { | 136 | onMounted(() => { |
| @@ -15,6 +15,7 @@ | @@ -15,6 +15,7 @@ | ||
| 15 | import { controlling } from '/@/api/camera/cameraManager'; | 15 | import { controlling } from '/@/api/camera/cameraManager'; |
| 16 | import { setVideoControl } from '/@/api/device/videoChannel'; | 16 | import { setVideoControl } from '/@/api/device/videoChannel'; |
| 17 | import XGPlayer from '/@/components/Video/src/XGPlayer.vue'; | 17 | import XGPlayer from '/@/components/Video/src/XGPlayer.vue'; |
| 18 | + import PresetPlayer from 'xgplayer'; | ||
| 18 | 19 | ||
| 19 | const props = defineProps<{ | 20 | const props = defineProps<{ |
| 20 | playUrl?: string; | 21 | playUrl?: string; |
| @@ -80,6 +81,10 @@ | @@ -80,6 +81,10 @@ | ||
| 80 | } | 81 | } |
| 81 | handleControl(1, action); | 82 | handleControl(1, action); |
| 82 | }; | 83 | }; |
| 84 | + | ||
| 85 | + const handleVideoStatus = (flag: boolean) => { | ||
| 86 | + isPlay.value = flag; | ||
| 87 | + }; | ||
| 83 | </script> | 88 | </script> |
| 84 | 89 | ||
| 85 | <template> | 90 | <template> |
| @@ -90,6 +95,9 @@ | @@ -90,6 +95,9 @@ | ||
| 90 | :url="playUrl" | 95 | :url="playUrl" |
| 91 | auto-play | 96 | auto-play |
| 92 | :config="{ fluid: true }" | 97 | :config="{ fluid: true }" |
| 98 | + @play="handleVideoStatus(true)" | ||
| 99 | + @pause="handleVideoStatus(false)" | ||
| 100 | + @ended="handleVideoStatus(false)" | ||
| 93 | /> | 101 | /> |
| 94 | 102 | ||
| 95 | <div | 103 | <div |