|
@@ -79,24 +79,32 @@ |
|
@@ -79,24 +79,32 @@ |
79
|
});
|
79
|
});
|
80
|
};
|
80
|
};
|
81
|
|
81
|
|
82
|
- //type 1:上 2:右 3:下 4:左 5:播放/暂停
|
|
|
83
|
- const handleClick = (type: number) => {
|
|
|
84
|
- console.log(type, 'type');
|
|
|
85
|
- if (type == 5) {
|
|
|
86
|
- // if (unref(isPlay)) {
|
|
|
87
|
- // unref(videoPlayInstance)?.play();
|
|
|
88
|
- // } else {
|
|
|
89
|
- // unref(videoPlayInstance)?.pause();
|
|
|
90
|
- // }
|
|
|
91
|
- isPlay.value = !isPlay.value;
|
|
|
92
|
- }
|
82
|
+ //播放/暂停
|
|
|
83
|
+ const handleClick = () => {
|
|
|
84
|
+ console.log('播放/暂停');
|
|
|
85
|
+ unref(isPlay) && unref(videoPlayInstance)?.pause();
|
|
|
86
|
+ !unref(isPlay) && unref(videoPlayInstance)?.play();
|
|
|
87
|
+ };
|
|
|
88
|
+
|
|
|
89
|
+ const handleTopClick = () => {
|
|
|
90
|
+ console.log('上');
|
|
|
91
|
+ };
|
|
|
92
|
+
|
|
|
93
|
+ const handleRightClick = () => {
|
|
|
94
|
+ console.log('右');
|
|
|
95
|
+ };
|
|
|
96
|
+
|
|
|
97
|
+ const handleBottomClick = () => {
|
|
|
98
|
+ console.log('下');
|
|
|
99
|
+ };
|
|
|
100
|
+
|
|
|
101
|
+ const handleLeftClick = () => {
|
|
|
102
|
+ console.log('左');
|
93
|
};
|
103
|
};
|
94
|
|
104
|
|
95
|
// type 1:放大 2:缩小
|
105
|
// type 1:放大 2:缩小
|
96
|
const handleScale = (type: number) => {
|
106
|
const handleScale = (type: number) => {
|
97
|
- if (type == 1) {
|
|
|
98
|
- } else {
|
|
|
99
|
- }
|
107
|
+ console, log(type);
|
100
|
};
|
108
|
};
|
101
|
|
109
|
|
102
|
const isPlay = ref<Boolean | null | undefined>(true);
|
110
|
const isPlay = ref<Boolean | null | undefined>(true);
|
|
@@ -104,7 +112,30 @@ |
|
@@ -104,7 +112,30 @@ |
104
|
onMounted(async () => {
|
112
|
onMounted(async () => {
|
105
|
init();
|
113
|
init();
|
106
|
await nextTick();
|
114
|
await nextTick();
|
107
|
- isPlay.value = unref(videoPlayInstance)?.paused();
|
115
|
+ // isPlay.value = unref(videoPlayInstance)?.paused();
|
|
|
116
|
+ videoPlayInstance.value.on('loadedmetadata', () => {
|
|
|
117
|
+ console.log('视频长度');
|
|
|
118
|
+ });
|
|
|
119
|
+ videoPlayInstance.value.on('waiting', () => {
|
|
|
120
|
+ isPlay.value = false;
|
|
|
121
|
+ console.log('视频加载中');
|
|
|
122
|
+ });
|
|
|
123
|
+ videoPlayInstance.value.on('play', () => {
|
|
|
124
|
+ isPlay.value = true;
|
|
|
125
|
+ console.log('视频开始播放');
|
|
|
126
|
+ });
|
|
|
127
|
+ videoPlayInstance.value.on('playing', () => {
|
|
|
128
|
+ isPlay.value = true;
|
|
|
129
|
+ console.log('正在播放');
|
|
|
130
|
+ });
|
|
|
131
|
+ videoPlayInstance.value.on('pause', () => {
|
|
|
132
|
+ isPlay.value = false;
|
|
|
133
|
+ console.log('暂停播放');
|
|
|
134
|
+ });
|
|
|
135
|
+ videoPlayInstance.value.on('ended', () => {
|
|
|
136
|
+ isPlay.value = false;
|
|
|
137
|
+ console.log('结束播放');
|
|
|
138
|
+ });
|
108
|
});
|
139
|
});
|
109
|
|
140
|
|
110
|
onUnmounted(() => {
|
141
|
onUnmounted(() => {
|
|
@@ -132,31 +163,29 @@ |
|
@@ -132,31 +163,29 @@ |
132
|
|
163
|
|
133
|
<div class="home mt-5">
|
164
|
<div class="home mt-5">
|
134
|
<Button class="front-sty-center child center" shape="circle" @click="handleClick(5)">
|
165
|
<Button class="front-sty-center child center" shape="circle" @click="handleClick(5)">
|
135
|
- <!-- 暂停 -->
|
|
|
136
|
- <PauseOutlined v-if="!isPlay" class="child-icon" style="color: #fffbfb" />
|
|
|
137
|
- <!-- 播放 -->
|
166
|
+ <PauseOutlined v-if="isPlay" class="child-icon" style="color: #fffbfb" />
|
138
|
<CaretRightOutlined v-else class="child-icon" style="color: #fffbfb" />
|
167
|
<CaretRightOutlined v-else class="child-icon" style="color: #fffbfb" />
|
139
|
</Button>
|
168
|
</Button>
|
140
|
|
169
|
|
141
|
<div class="box">
|
170
|
<div class="box">
|
142
|
<div>
|
171
|
<div>
|
143
|
- <Button class="left-top in-block" @click="handleClick(1)">
|
|
|
144
|
- <CaretUpOutlined class="icon-rotate child-icon" @click="handleClick(1)" />
|
172
|
+ <Button class="left-top in-block" @click="handleTopClick">
|
|
|
173
|
+ <CaretUpOutlined class="icon-rotate child-icon" />
|
145
|
</Button>
|
174
|
</Button>
|
146
|
- <Button class="right-top in-block" @click="handleClick(2)">
|
|
|
147
|
- <CaretRightOutlined class="icon-rotate child-icon" @click="handleClick(2)" />
|
175
|
+ <Button class="right-top in-block" @click="handleRightClick">
|
|
|
176
|
+ <CaretRightOutlined class="icon-rotate child-icon" />
|
148
|
</Button>
|
177
|
</Button>
|
149
|
</div>
|
178
|
</div>
|
150
|
<div>
|
179
|
<div>
|
151
|
- <Button class="left-bottom in-block" @click="handleClick(3)">
|
|
|
152
|
- <CaretLeftOutlined class="icon-rotate child-icon" @click="handleClick(3)" />
|
180
|
+ <Button class="left-bottom in-block" @click="handleBottomClick">
|
|
|
181
|
+ <CaretLeftOutlined class="icon-rotate child-icon" />
|
153
|
</Button>
|
182
|
</Button>
|
154
|
- <Button class="right-bottom in-block" @click="handleClick(4)">
|
|
|
155
|
- <CaretDownOutlined class="icon-rotate child-icon" @click="handleClick(4)" />
|
183
|
+ <Button class="right-bottom in-block" @click="handleLeftClick">
|
|
|
184
|
+ <CaretDownOutlined class="icon-rotate child-icon" />
|
156
|
</Button>
|
185
|
</Button>
|
157
|
</div>
|
186
|
</div>
|
158
|
|
187
|
|
159
|
- <Button class="circle" @click="handleClick(5)" />
|
188
|
+ <Button class="circle" @click="handleClick" />
|
160
|
</div>
|
189
|
</div>
|
161
|
</div>
|
190
|
</div>
|
162
|
<div class="flex justify-center mt-8">
|
191
|
<div class="flex justify-center mt-8">
|