提交 3d28531b 编写于 作者: Q qiang

feat: H5 端 video 支持 show-center-play-btn

上级 fc6be3cb
<template> <template>
<uni-video <uni-video
:id="id" :id="id"
v-on="$listeners" v-on="$listeners"
> >
<div <div
ref="container" ref="container"
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
> >
<video <video
ref="video" ref="video"
:style="{opacity:!start?0.8:1,objectFit:objectFit}" :style="{objectFit:objectFit}"
:muted="muted" :muted="muted"
:loop="loop" :loop="loop"
:src="srcSync" :src="srcSync"
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<div <div
v-show="controlsShow" v-show="controlsShow"
class="uni-video-bar uni-video-bar-full" class="uni-video-bar uni-video-bar-full"
@click.stop @click.stop
> >
<div class="uni-video-controls"> <div class="uni-video-controls">
<div <div
...@@ -51,8 +51,8 @@ ...@@ -51,8 +51,8 @@
class="uni-video-control-button" class="uni-video-control-button"
@click.stop="trigger" @click.stop="trigger"
/> />
<div class="uni-video-current-time"> <div class="uni-video-current-time">
{{ currentTime|time }} {{ currentTime|time }}
</div> </div>
<div <div
ref="progress" ref="progress"
...@@ -62,19 +62,19 @@ ...@@ -62,19 +62,19 @@
<div class="uni-video-progress"> <div class="uni-video-progress">
<div <div
:style="{width:buffered+'%'}" :style="{width:buffered+'%'}"
class="uni-video-progress-buffered" class="uni-video-progress-buffered"
/> />
<div <div
ref="ball" ref="ball"
:style="{left:progress+'%'}" :style="{left:progress+'%'}"
class="uni-video-ball" class="uni-video-ball"
> >
<div class="uni-video-inner" /> <div class="uni-video-inner" />
</div> </div>
</div> </div>
</div> </div>
<div class="uni-video-duration"> <div class="uni-video-duration">
{{ (duration||durationTime)|time }} {{ (duration||durationTime)|time }}
</div> </div>
</div> </div>
<div <div
...@@ -82,8 +82,8 @@ ...@@ -82,8 +82,8 @@
:class="{'uni-video-danmu-button-active':enableDanmuSync}" :class="{'uni-video-danmu-button-active':enableDanmuSync}"
class="uni-video-danmu-button" class="uni-video-danmu-button"
@click.stop="triggerDanmu" @click.stop="triggerDanmu"
> >
弹幕 弹幕
</div> </div>
<div <div
v-show="showFullscreenBtn" v-show="showFullscreenBtn"
...@@ -96,27 +96,27 @@ ...@@ -96,27 +96,27 @@
v-show="start&&enableDanmuSync" v-show="start&&enableDanmuSync"
ref="danmu" ref="danmu"
style="z-index: 0;" style="z-index: 0;"
class="uni-video-danmu" class="uni-video-danmu"
/> />
<div <div
v-if="!start" v-if="centerPlayBtnShow"
class="uni-video-cover" class="uni-video-cover"
@click.stop @click.stop
> >
<div <div
class="uni-video-cover-play-button" class="uni-video-cover-play-button"
@click.stop="play" @click.stop="play"
/> />
<p class="uni-video-cover-duration"> <p class="uni-video-cover-duration">
{{ (duration||durationTime)|time }} {{ (duration||durationTime)|time }}
</p> </p>
</div> </div>
<div <div
:class="{'uni-video-toast-volume':gestureType==='volume'}" :class="{'uni-video-toast-volume':gestureType==='volume'}"
class="uni-video-toast" class="uni-video-toast"
> >
<div class="uni-video-toast-title"> <div class="uni-video-toast-title">
音量 音量
</div> </div>
<svg <svg
class="uni-video-toast-icon" class="uni-video-toast-icon"
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
<div class="uni-video-toast-value"> <div class="uni-video-toast-value">
<div <div
:style="{width:volumeNew*100+'%'}" :style="{width:volumeNew*100+'%'}"
class="uni-video-toast-value-content" class="uni-video-toast-value-content"
> >
<div class="uni-video-toast-volume-grids"> <div class="uni-video-toast-volume-grids">
<div <div
...@@ -147,10 +147,10 @@ ...@@ -147,10 +147,10 @@
</div> </div>
<div <div
:class="{'uni-video-toast-progress':gestureType=='progress'}" :class="{'uni-video-toast-progress':gestureType=='progress'}"
class="uni-video-toast" class="uni-video-toast"
> >
<div class="uni-video-toast-title"> <div class="uni-video-toast-title">
{{ currentTimeNew|time }} / {{ durationTime|time }} {{ currentTimeNew|time }} / {{ durationTime|time }}
</div> </div>
</div> </div>
</div> </div>
...@@ -278,6 +278,10 @@ export default { ...@@ -278,6 +278,10 @@ export default {
showPlayBtn: { showPlayBtn: {
type: [Boolean, String], type: [Boolean, String],
default: true default: true
},
showCenterPlayBtn: {
type: [Boolean, String],
default: true
} }
}, },
data () { data () {
...@@ -306,8 +310,11 @@ export default { ...@@ -306,8 +310,11 @@ export default {
} }
}, },
computed: { computed: {
centerPlayBtnShow () {
return this.controls && this.showCenterPlayBtn && !this.start
},
controlsShow () { controlsShow () {
return this.start && this.controls && this.controlsVisible return !this.centerPlayBtnShow && this.controls && this.controlsVisible
}, },
autoHideContorls () { autoHideContorls () {
return this.controlsShow && this.playing && !this.controlsTouching return this.controlsShow && this.playing && !this.controlsTouching
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册