gafz-hdsp/src/components/XGVideoViewer/index.vue

<template>
  <div
    :class="[
      'video-wrapper',
      isMobile ? 'mobile' : '',
      isCssFullScreenRef ? 'fullScreen' : '',
    ]"
    :style="{ minHeight: props.height }"
  >
    <div id="mse"></div>
    <Transition name="fade">
      <div v-show="questionShowRef && question" class="question">
        问题：{{ question }}
      </div>
    </Transition>
    <Transition name="fade">
      <div
        v-show="questionShowRef"
        :class="['option-btn-box']"
        :style="{ flexWrap: props.options.length >= 4 ? 'wrap' : 'nowrap' }"
      >
        <div
          class="option-btn-item"
          v-for="(option, index) in props.options"
          :key="index"
        >
          <div class="option-btn" @click="() => emits('onClickOption', option)">
            {{ option.optionType }}：{{ option.optionName }}
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>
<script>
export default {
  name: "VideoLineGraph",
};
</script>
<script setup>
import { watch } from "vue";
import useInitPlayer from "./hooks/useInitPlayer";

const emits = defineEmits("onClickOption", "onFullscreenChange", 'reload');

const props = defineProps({
  // 问题
  question: {
    type: String,
    default: "",
  },
  // 选项
  options: {
    type: Array,
    default: () => [],
  },
  // 视频地址
  videoUrl: {
    type: String,
    default: "",
  },
  // 视频容器宽度
  width: {
    type: String,
    default: "100%",
  },
  // 视频容器高度
  height: {
    type: String,
    default: "80vh",
  },
  // 是否自动播放
  autoplay: {
    type: Boolean,
    default: true,
  },
  // 是否静音自动播放。由于浏览器策略访问权重低的页面是不可以自动播放视频的，但是可以静音自动播放。这种情况下可以使用这个
  autoplayMuted: {
    type: Boolean,
    default: false,
  },
  // 视频封面图片
  poster: {
    type: String,
    default: "",
  },
  // 是否需要对外发送信息
  ifSendMsg: {
    type: Boolean,
    default: false,
  },
  // 外部调用者传递的数据, ifSendMsg 为 false时，说明没有外部调用，此参数就无意义
  pipData: {
    type: Object,
    default: () => ({}),
  },
});

const { xgplayer, isMobile, isCssFullScreenRef, questionShowRef, playNext } =
  useInitPlayer(props, emits);

watch(
  () => props.videoUrl,
  (value) => {
    if (!xgplayer.value || !props.videoUrl) return;
    playNext(value, props.poster);
    // 切换poster海报, playNext里面有时候会失败，这里重新赋值一下
    const posterDom = document.querySelector(".xgplayer-poster");
    posterDom.style.backgroundImage = `url("${props.poster}")`;
  }
);
</script>

<style lang="scss">
.xgplayer .xgplayer-replay {
  left: unset;
  right: 0;
  top: -20px;
  flex-direction: row;
  width: 110px;
  transform: translate(-20%, 0%);
}
.xgplayer.xgplayer-rotate-fullscreen {
  width: 100vh !important;
}
</style>

<style lang="scss" scoped>
.fade-enter-active {
  transition: opacity 0.8s ease;
}

.fade-enter-from {
  opacity: 0;
}

.video-wrapper {
  width: 100%;
  background: #999;
  position: relative;
  .question {
    width: 100%;
    position: absolute;
    padding: 8px 16px;
    top: 20%;
    left: 0;
    transform: translateY(-50%);
    background-color: rgba($color: #000000, $alpha: 0.6);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
  }
  .option-btn-box {
    width: 100%;
    position: absolute;
    bottom: 60px;
    left: 0;
    display: flex;
    z-index: 9999;
    .option-btn-item {
      width: 50%;
      padding: 2px;
      .option-btn {
        border: 1px solid #000;
        background-color: rgba($color: #ffffff, $alpha: 0.6);
        color: #000;
        font-size: 8px;
        width: 100%;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 2px;
        user-select: none;
        cursor: pointer;
      }
    }
  }
  &.fullScreen .option-btn-box,
  &.fullScreen .question {
    position: fixed;
  }
  &.mobile.fullScreen .question {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vh;
    transform: rotate(90deg) translate(0, -85vw);
    transform-origin: 0 0;
  }
  &.mobile.fullScreen .option-btn-box {
    left: 0;
    bottom: 0;
    position: fixed;
    transform: rotate(90deg) translate(-100%, -60px);
    transform-origin: 0 100%;
    width: 100vh;
  }
}
</style>