activity/src/components/video.vue

<template>
  <div class="sgVideo">
    <video
      v-if="nouseVideo"
      :src="props.url"
      ref="Propaganda"
      x-webkit-airplay="allow"
      x5-video-player-type="h5"
      x5-video-player-fullscreen="true"
      x5-video-orientation="portraint"
      x5-playsinline
      loop
      controls
      onContextMenu="return false"
      onSelectStart="return false"
      @durationchange="durationchange"
    ></video>
    <iframe v-else :src="props.url" frameborder="0"></iframe>
    <div class="mo" v-if="nouseVideo"></div>

    <svg
      t="1667978418661"
      class="play"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2541"
      :width="ScreenWidth * 0.1"
      :height="ScreenWidth * 0.1"
      @click="play"
    >
      <path
        d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667z m0 810.666666c-204.8 0-373.333333-168.533333-373.333333-373.333333S307.2 138.666667 512 138.666667 885.333333 307.2 885.333333 512 716.8 885.333333 512 885.333333z"
        p-id="2542"
        fill="#e6e6e6"
      ></path>
      <path
        d="M708.266667 465.066667l-234.666667-134.4c-8.533333-4.266667-17.066667-6.4-25.6-6.4-29.866667 0-53.333333 23.466667-53.333333 53.333333v268.8c0 8.533333 2.133333 19.2 6.4 25.6 10.666667 17.066667 27.733333 27.733333 46.933333 27.733333 8.533333 0 17.066667-2.133333 25.6-6.4l234.666667-134.4c8.533333-4.266667 14.933333-10.666667 19.2-19.2 6.4-12.8 8.533333-27.733333 4.266666-40.533333-2.133333-14.933333-10.666667-25.6-23.466666-34.133333z m-249.6 162.133333V396.8L661.333333 512l-202.666666 115.2z"
        p-id="2543"
        fill="#e6e6e6"
      ></path>
    </svg>
  </div>
</template>
<script setup>
// import { reactive } from "vue";
import { ref, defineProps, onMounted } from "vue";
import { isAndroid, isWechat } from "../utils/isTerminal";
const props = defineProps({
  url: {
    type: String, //参数类型
    default: String, //默认值
    required: true, //是否必须传递
  },
});
const nouseVideo = ref(!isWechat && isAndroid); // 判断是否在安卓浏览器环境下
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
const ScreenWidth = ref(window.$originData.orginParames.availWidth);
const Propaganda = ref(null);
onMounted(() => {});
function durationchange() {
  const element = Propaganda.value;
  if (element.duration <= 0) return;
  element.currentTime = 0.01; // 防止微信浏览器不能加载封面

  if (element.value) return;
  const h = (element.videoHeight * ScreenWidth.value) / element.videoWidth;
  element.style.marginTop = h * 0.3 * -1 + "px";
  element.height = h * 1.6;
  document.querySelector(".sgVideo").style.height = h + "px";
}

function play() {
  console.log(
    "-->",
    document.getElementsByTagName("iframe")[0].contentWindow.document.body
  );
  if (nouseVideo.value) return;
  Propaganda.value.play();
  document.querySelector(".play").style.display = "none";
}
</script>
<style scoped>
.sgVideo > video,
.sgVideo iframe {
  pointer-events: none;
  width: 100%;
  background-color: #000;
}
.sgVideo {
  position: relative;
  overflow: hidden;
}
.sgVideo .play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sgVideo .mo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
video::-webkit-media-controls {
  display: none !important;
}
</style>