<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>