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

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

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