lsc vor 1 Monat
Ursprung
Commit
f9031a2932

+ 3 - 0
src/assets/img/Subtract.svg

@@ -0,0 +1,3 @@
+<svg width="131" height="81" viewBox="0 0 131 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9932 80.8438H7.53906C3.37547 80.8436 5.08188e-05 77.4686 0 73.3047V8.38281C0.000136568 4.21927 3.37552 0.843885 7.53906 0.84375H23.9932V80.8438ZM101.899 80.8438H28.6631V0.84375H101.899V80.8438ZM123.022 0.84375C127.186 0.84375 130.562 4.21919 130.562 8.38281V73.3047C130.562 77.4687 127.186 80.8438 123.022 80.8438H106.569V0.84375H123.022Z" fill="black" fill-opacity="0.2"/>
+</svg>

+ 24 - 7
src/views/components/element/VideoElement/VideoPlayer/index.vue

@@ -32,8 +32,13 @@
       ></video>
       <div class="bezel">
         <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>
       </div>
     </div>
@@ -690,15 +695,19 @@ useMSE(props.src, videoRef)
     position: absolute;
     top: 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;
     display: flex;
     justify-content: 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;
     pointer-events: none;
     font-size: 40px;
@@ -707,6 +716,14 @@ useMSE(props.src, videoRef)
       animation: bezel-hide 0.5s linear;
     }
 
+    .icon{
+      height: 52px;
+      width: 52px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     @keyframes bezel-hide {
       from {
         opacity: 1;