Skip to content

Commit 315a963

Browse files
vickyYEvickyYE
committed
update 视频触摸蒙层删除
1 parent 7671e6b commit 315a963

File tree

3 files changed

+63
-37
lines changed

3 files changed

+63
-37
lines changed

‎src/packages/video/demo.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,8 @@
8989
muted: true,
9090
disabled: true,
9191
playsinline: true,
92-
loop: true
92+
loop: true,
93+
controls: false
9394
},
9495
9596
};

‎src/packages/video/video.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,14 @@
6666
width: 100%;
6767
z-index: 11111111;
6868
align-items: center;
69+
opacity: 0;
70+
transition: all 1s;
71+
&.show-control {
72+
opacity: 1;
73+
}
74+
&.hide-control {
75+
opacity: 0;
76+
}
6977
.control-play-btn {
7078
width: 18px;
7179
height: 18px;
@@ -76,7 +84,16 @@
7684
background-repeat: no-repeat;
7785
background-position: center;
7886
margin: 0 10px;
87+
&.puase {
88+
background-image: -webkit-image-set(
89+
url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE5aDRWNUg2djE0em04LTE0djE0aDRWNWgtNHoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==)
90+
1x
91+
);
92+
background-repeat: no-repeat;
93+
background-position: center;
94+
}
7995
}
96+
8097
.duration-time,
8198
.current-time {
8299
color: #fff;

‎src/packages/video/video.vue

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
<div class="playing-mask" ref="touchMask" v-if="showToolbox && !isDisabled" @click="play"></div>
88
<div class="nut-video-play-btn" v-if="showToolbox && !isDisabled" ref="palyBtn" v-show="!state.playing"
99
@click="play"></div>
10-
<div class="nut-video-controller" v-show="showToolbox && !isDisabled">
10+
<div class="nut-video-controller" v-show="showToolbox && !isDisabled"
11+
:class="{'show-control': !state.playing,'hide-control':state.playing}">
1112
<div class="control-play-btn" @click="play"></div>
1213
<div class="current-time">{{ videoSet.displayTime }}</div>
1314
<div class="progress-container">
@@ -22,7 +23,7 @@
2223
</div>
2324
</div>
2425
<div class="duration-time">{{ videoSet.totalTime }}</div>
25-
<div class="volume" @click="handleMuted"></div>
26+
<div class="volume" @click="handleMuted" :class="{'muted':state.isMuted}"></div>
2627
<div class="fullscreen-icon" @click="fullScreen"></div>
2728
</div>
2829
<!-- 错误弹窗 -->
@@ -37,12 +38,12 @@
3738
export default {
3839
name: 'nut-video',
3940
props: {
40-
src: '',
41-
playsinline: {
42-
type: Boolean,
43-
default: false
41+
sources: {
42+
type: Array,
43+
default() {
44+
return []
45+
}
4446
},
45-
sources: Array,
4647
options: {
4748
type: Object,
4849
default() {
@@ -60,6 +61,10 @@
6061
},
6162
required: true
6263
},
64+
model: {
65+
type: String,
66+
default: ''
67+
}
6368
},
6469
data() {
6570
return {
@@ -87,22 +92,23 @@
8792
}
8893
},
8994
state: {
90-
contrlShow: false,
95+
controlShow: true,
9196
vol: 0.5, //音量
9297
currentTime: 0, //当前时间
9398
fullScreen: false,
9499
playing: false, //是否正在播放
95100
isLoading: false,
96101
isEnd: false,
97-
isError: false
102+
isError: false,
103+
isMuted: false
98104
},
99-
showTouchMask: false
105+
showTouchMask: false,
100106
};
101107
},
102108
computed: {
103109
isDisabled() {
104110
return this.options.disabled
105-
},
111+
}
106112
107113
},
108114
watch: {
@@ -118,10 +124,25 @@
118124
},
119125
options: {
120126
handler(val) {
121-
127+
this.state.isMuted = val.muted ? val.muted : false
122128
},
123129
immediate: true
124-
}
130+
},
131+
// model: {
132+
// handler(val) {
133+
// if (val) {
134+
// if (val == 'custom') {
135+
// this.state.controlShow = false;
136+
// this.showToolbox = this.options.controls ? true : false
137+
// }
138+
// } else {
139+
// this.showToolbox = false;
140+
// this.state.controlShow = this.options.controls ? true : false
141+
// }
142+
// },
143+
// immediate: true
144+
145+
// }
125146
},
126147
mounted() {
127148
this.init();
@@ -172,31 +193,22 @@
172193
this.player.pos = $player.getBoundingClientRect();
173194
this.progressBar.pos = $progress.getBoundingClientRect();
174195
this.videoSet.progress.width = Math.round($progress.getBoundingClientRect().width);
175-
console.log(this.progressBar.pos)
176196
},
177197
play() {
178-
this.state.playing = !this.state.playing;
198+
179199
180200
if (this.options.autoplay && this.options.disabled) {
181201
this.state.playing = true;
202+
// this.state.controlShow = false
182203
return false;
183204
}
205+
this.state.playing = !this.state.playing;
184206
if (this.videoElm) {
185207
186-
// if (this.state.playing) {
187-
// this.videoElm.play();
188-
// this.videoElm.addEventListener('ended', this.playEnded);
189-
// this.$emit('play', this.video);
190-
// } else {
191-
// this.videoElm.pause();
192-
// this.$emit('pause', this.video);
193-
// }
194208
// 播放状态
195209
if (this.state.playing) {
196210
try {
197-
// console.log(111)
198211
this.videoElm.play();
199-
// this.isPauseTouch = false;
200212
// 监听缓存进度
201213
this.videoElm.addEventListener('progress', e => {
202214
this.getLoadTime();
@@ -213,23 +225,22 @@
213225
}
214226
// 停止状态
215227
else {
216-
// console.log('pu')
217-
this.isPauseTouch = true;
218228
this.videoElm.pause();
219229
this.$emit('pause', this.videoElm);
230+
220231
}
221232
}
222233
},
223234
// 音量控制
224235
volumeHandle() {
225-
this.state.vol = this.videoElm.volume;
236+
this.state.vol = this.options.volume;
226237
},
227238
// 静音控制
228239
handleMuted() {
229-
240+
this.state.isMuted = !this.state.isMuted
241+
this.videoElm.muted = this.state.isMuted
230242
},
231243
playEnded() {
232-
// console.log('ended')
233244
this.state.playing = false;
234245
this.state.isEnd = true;
235246
this.state.controlBtnShow = true;
@@ -247,7 +258,7 @@
247258
fullScreen() {
248259
if (!this.state.fullScreen) {
249260
this.state.fullScreen = true;
250-
this.video.webkitRequestFullScreen();
261+
this.videoElm.webkitRequestFullScreen();
251262
} else {
252263
this.state.fullScreen = false;
253264
document.webkitCancelFullScreen();
@@ -262,7 +273,6 @@
262273
// 赋值时长
263274
this.videoSet.totalTime = this.timeFormat(this.videoElm.duration);
264275
this.videoSet.displayTime = this.timeFormat(this.videoElm.currentTime);
265-
// console.log(this.videoSet, this.timeFormat(this.videoElm.duration), this.timeFormat(this.videoElm.currentTime), this.videoSet.progress.current)
266276
},
267277
timeFormat(t) {
268278
var h = Math.floor(t / 3600);
@@ -287,8 +297,8 @@
287297
},
288298
// 获取缓存时间
289299
getLoadTime() {
290-
// console.log('缓存了...',this.videoElm.buffered.end(0));
291-
this.videoSet.loaded = (this.videoElm.buffered.end(0) / this.videoElm.duration) * 100;
300+
if (this.videoSet.loaded)
301+
this.videoSet.loaded = (this.videoElm.buffered.end(0) / this.videoElm.duration) * 100;
292302
},
293303
getTime() {
294304
this.videoElm.addEventListener('durationchange', e => {
@@ -302,7 +312,6 @@
302312
// 拖动播放进度
303313
touchSlidSrart(e) { },
304314
touchSlidMove(e) {
305-
console.log("触摸中...");
306315
let currentX = e.targetTouches[0].pageX;
307316
let offsetX = currentX - this.progressBar.pos.left;
308317
// 边界检测
@@ -320,7 +329,6 @@
320329
321330
},
322331
touchSlidEnd(e) {
323-
console.log("触摸结束...");
324332
let currentX = e.changedTouches[0].pageX;
325333
let offsetX = currentX - this.progressBar.pos.left;
326334
this.videoSet.progress.current = offsetX;

0 commit comments

Comments
 (0)