✨ 粗略处理视频截图 #44

src/assets/css/post-parser.css

@@ -2,8 +2,7 @@
  * @file assets css post-parser.css
  * @description 米游社解析 css
  * @todo 需要完善
- * @author BTMuli <bt-muli@outlook.com>
+ * @since Beta v0.3.3
- * @since Beta v0.3.0
  */
 
 .mys-post-body {
@@ -28,6 +27,7 @@
 }
 
 :deep(.mys-post-div) {
+  position: relative;
   margin: 10px auto;
 }
 
@@ -73,6 +73,37 @@
   border-radius: 10px;
 }
 
+:deep(.mys-post-vod-cover-div) {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 800px;
+  height: 450px;
+  border-radius: 10px;
+}
+
+:deep(.mys-post-vod-cover) {
+  width: 800px;
+  height: 450px;
+  border-radius: 10px;
+}
+
+:deep(.mys-post-vod-icon) {
+  position: absolute;
+  top: calc(50% - 40px);
+  left: calc(50% - 40px);
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  backdrop-filter: blur(5px);
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 50px;
+  line-height: 80px;
+  text-align: center;
+}
+
 :deep(.mys-post-iframe) {
   overflow: hidden;
   width: 800px;

src/plugins/Mys/utils/parsePost.ts

@@ -1,11 +1,9 @@
 /**
  * @file plugins Mys utils parsePost.ts
  * @description 用于解析Mys数据的工具
- * @author BTMuli <bt-muli@outlook.com>
+ * @since Beta v0.3.3
- * @since Beta v0.3.2
  */
 
-// third party
 import { score } from "wcag-color";
 import * as colorConvert from "color-convert";
 
@@ -311,7 +309,7 @@ function parseImage(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLDivElem
 
 /**
  * @description 解析视频
- * @since Beta v0.3.0
+ * @since Beta v0.3.3
  * @param {TGApp.Plugins.Mys.Post.StructuredContent} data Mys数据
  * @returns {HTMLDivElement} 解析后的视频
  */
@@ -345,6 +343,17 @@ function parseVideo(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLDivElem
     video.appendChild(source);
     // 插入 video
     div.appendChild(video);
+    // 创建视频封面图
+    const coverDiv = document.createElement("div");
+    const cover = document.createElement("img");
+    cover.classList.add("mys-post-vod-cover");
+    cover.src = video.poster;
+    coverDiv.appendChild(cover);
+    const playIcon = document.createElement("div");
+    playIcon.classList.add("mdi", "mdi-play-circle-outline", "mys-post-vod-icon");
+    coverDiv.appendChild(playIcon);
+    coverDiv.classList.add("mys-post-vod-cover-div");
+    div.appendChild(coverDiv);
   } else if (data.insert.video) {
     // 创建 iframe
     const video = document.createElement("iframe");