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 |