✨ feat(组件): 新增纯视频播放组件

+<template>
+  <div class="video-wrapper">
+    <div
+      class="video-div"
+      :id="'mui-player-' + item.id"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+  /**
+   * 视频组件通用模块
+   */
+  import 'mui-player/dist/mui-player.min.css';
+  import MuiPlayer from 'mui-player';
+  import { onMounted } from 'vue';
+  // 视频基础属性
+  const props = defineProps({
+    item: Object,
+  });
+  // 视频播放事件回调
+  const emit = defineEmits(['on-play']);
+
+  onMounted(() => {
+    const mp = new MuiPlayer({
+      container: '#mui-player-' + props.item.id,
+      title: props.item.title,
+      src: props.item.video,
+      poster: props.item.cover,
+      autoFit: false,
+      videoAttribute: [
+        // 声明启用同层播放, 不让会自动全屏播放
+        { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
+        { attrKey: 'playsinline', attrValue: 'playsinline' },
+        { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
+      ],
+    });
+    const video = mp.video();
+    // 监听原生video事件
+    video &&
+      video.addEventListener('play', function (event) {
+        emit('on-play', {
+          event,
+          props: props.item,
+        });
+      });
+  });
+</script>
+
+<style lang="less" scoped>
+  .video-wrapper {
+    margin: 1rem;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
+
+    .video-div {
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+    }
+  }
+</style>

+export default [
+  {
+    "id": 314952,
+    "localism_type": "普通话",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1652859614.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:A3XNpa2-O4eaFjPK5R0pM-wMS2Q=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTI4NTk2MTQucG5nKiIsIkUiOjE5Njg0MjkxNDZ9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1652859612.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:YLs7BNF-chzhTsnoFqje-x4RIao=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTI4NTk2MTIubXA0KiIsIkUiOjE5Njg0MjkxNDZ9",
+    "note": "z",
+    "kg_id": 314481,
+    "kg_name": "云南省普洱市镇沅彝族哈尼族拉祜族自治县者东镇幼儿园",
+    "perf_id": 314950,
+    "name": "胡二",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/MjEwMzViY2QzM2RlZDJhZTEyNjM1Y2UxOGZiZDcyYjg0NmYxNDljNg.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 1,
+    "favor_num": 0,
+    "play_num": 1,
+    "is_like": 1
+  },
+  {
+    "id": 314946,
+    "localism_type": "普通话",
+    "cover": "https://gd-pri.jinshujufiles.com/en/g7D0MT/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1652857953.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:CYT2_4fEbC6BoYDc8rXUJxXiZx4=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL2c3RDBNVC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTI4NTc5NTMucG5nKiIsIkUiOjE5Njg0Mjc0ODV9",
+    "video": "https://gd-pri.jinshujufiles.com/en/g7D0MT/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1652857950.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:1i5wziqwGbCx41ZKzO-qWwYZyeQ=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL2c3RDBNVC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTI4NTc5NTAubXA0KiIsIkUiOjE5Njg0Mjc0ODV9",
+    "note": "Z",
+    "kg_id": 314481,
+    "kg_name": "云南省普洱市镇沅彝族哈尼族拉祜族自治县者东镇幼儿园",
+    "perf_id": 314945,
+    "name": "胡大",
+    "avatar": null,
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 1,
+    "like_num": 1,
+    "favor_num": 0,
+    "play_num": 1,
+    "is_like": 1
+  }
+]