使用 西瓜播放器，可添加全屏水印，安卓苹果环境都兼容

前序：

继前两篇文档之后，我发现，原生的video，没有倍速调整，需要添加也比较麻烦，所以我查阅多篇文档，发现使用西瓜播放器替换原生video是一个不错的方案

注意点：

西瓜播放器里有一个很重要的参数 rotateFullscreen: true, 这代表取缔默认全屏事件，采用css样式全屏，并使内容旋转90度，实现内容全屏功能。因为是css样式全屏，所以没有脱离dom流，即使在苹果环境下，也可以正常添加水印，以下是插件使用方法，可直接复制，再做改造。（水印添加可参考我上一篇文档）

官方文档  西瓜播放器 | 事件

引入插件：

npm install xgplayer

使用：

<template>
  <div id="xgplayer"></div>
</template>

<script>
import Player from "@/node_modules/xgplayer";
import "@/node_modules/xgplayer/dist/index.min.css";

export default {
  props: {
    url: {
      type: String,
    },
  },
  data() {
    return {};
  },
  onLoad() {},
  mounted() {
    setTimeout(() => {
      
      console.log(this.videoSrc,'videoSrc1');
      
      const player = new Player({
        id: "xgplayer",
        url: this.url,
        autoplay: false,
        controls: true,
        height: "100%",
        fluid: true,
        fitVideoSize: "auto",
  
        fullscreen: {
          rotateFullscreen: true,
          // useCssFullscreen: true, // 全屏按钮将会调用页面内全屏
        },
      });
  
      setTimeout(() => {
        const video = document.querySelector("video");
        console.log(video, "video");
        video.style.width = "100%";
        video.style.height = "100%";
        video.style.objectFit = "fill";
      }, 100);
      player.on("play", (e) => console.log("播放开始", e));
      player.on("pause", () => console.log("播放暂停"));
    }, 1000);
  },
  onShow() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.player-container {
  width: 100%;
  height: 100%;
  z-index: 9999;
}
#xgplayer {
  padding-top: 0 !important;
  //   height: 100% !important;
}
</style>