|
@@ -32,8 +32,13 @@
|
|
|
></video>
|
|
></video>
|
|
|
<div class="bezel">
|
|
<div class="bezel">
|
|
|
<span class="bezel-icon" :class="{ 'bezel-transition': bezelTransition }" @animationend="bezelTransition = false">
|
|
<span class="bezel-icon" :class="{ 'bezel-transition': bezelTransition }" @animationend="bezelTransition = false">
|
|
|
- <IconPause v-if="paused" />
|
|
|
|
|
- <IconPlayOne v-else />
|
|
|
|
|
|
|
+ <IconPause v-if="paused" class="icon"/>
|
|
|
|
|
+ <IconPlayOne
|
|
|
|
|
+ class="icon"
|
|
|
|
|
+ v-else
|
|
|
|
|
+ theme="filled"
|
|
|
|
|
+ fill="#fff"
|
|
|
|
|
+ />
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -690,15 +695,19 @@ useMSE(props.src, videoRef)
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
- margin: -26px 0 0 -26px;
|
|
|
|
|
- height: 52px;
|
|
|
|
|
- width: 52px;
|
|
|
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
|
+ // height: 52px;
|
|
|
|
|
+ // width: 52px;
|
|
|
|
|
+ height: 81px;
|
|
|
|
|
+ width: 131px;
|
|
|
padding: 12px;
|
|
padding: 12px;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
|
|
+ // background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
+ // background: rgba(0, 0, 0, 0);
|
|
|
|
|
+ background-image: url(@/assets/img/Subtract.svg);
|
|
|
|
|
+ // border-radius: 50%;
|
|
|
opacity: 0;
|
|
opacity: 0;
|
|
|
pointer-events: none;
|
|
pointer-events: none;
|
|
|
font-size: 40px;
|
|
font-size: 40px;
|
|
@@ -707,6 +716,14 @@ useMSE(props.src, videoRef)
|
|
|
animation: bezel-hide 0.5s linear;
|
|
animation: bezel-hide 0.5s linear;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ .icon{
|
|
|
|
|
+ height: 52px;
|
|
|
|
|
+ width: 52px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
@keyframes bezel-hide {
|
|
@keyframes bezel-hide {
|
|
|
from {
|
|
from {
|
|
|
opacity: 1;
|
|
opacity: 1;
|