GCLS_Page_Book_Component_NPC/src/components/Adult/preview/VideoControl.vue

<template>
  <div class="videoView">
    <!-- <video
      id="video"
      :src="curQue.video_list[0].url"
      controls
      :poster="curQue.img_list.length > 0 ? curQue.img_list[0].url : ''"
      controlslist="nodownload"
      disablePictureInPicture
      @mousemove="qxdShow = true"
      @mouseout="videoOut"
    ></video>
    <div :class="['qxd', qxdShow ? 'qxdshow' : 'qxdhide']">清晰度</div> -->
    <div
      :id="'videoPlayer' + indexStr"
      @mousemove="viedeoMove"
      @click="videoClick"
    ></div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';

import vedioPlayer from "xgplayer";
import "video.js/dist/video-js.css";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["curQue", "fn_data", "type", "indexStr"],
  data() {
    //这里存放数据
    return {
      qxdShow: true,
      VideoStatus: "",
      player: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    player: {
      handler: function () {
        //do something
        if (this.player._hasStart) {
          //this.zantingAudio()
        }
      },
      deep: true,
    },
  },
  //方法集合
  methods: {
    zantingAudio() {
      let audio = document.getElementsByTagName("audio");
      audio.forEach((item) => {
        item.pause();
      });
    },
    // videoOut() {
    //   if (this.VideoStatus == "播放") {
    //     this.qxdShow = false;
    //   }
    // },
    viedeoMove() {
      let name = document.getElementsByClassName("name")[0];
      if (name) {
        let text = name.innerText || name.textContent;
        if (!text) {
          name.innerText
            ? (name.innerText = "流畅")
            : (name.textContent = "流畅");
        }
      }
    },
    videoClick() {
      if (this.player._hasStart) {
        this.zantingAudio();
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    // let node = document.getElementById("video");
    // node.addEventListener("playing", function () {
    //   //播放中
    //   _this.VideoStatus = "播放";
    // });
    // node.addEventListener("pause", function () {
    //   //暂停开始执行的函数
    //   _this.VideoStatus = "暂停";
    // });
    _this.player = new vedioPlayer({
      id: `videoPlayer${_this.indexStr}`,
      autoplay: false,
      volume: 0.5, //视频初始音量大小
      loop: false, //是否循环播放
      url: _this.curQue.definition_list[0].file_url,
      poster:
        _this.curQue.img_list.length > 0 ? _this.curQue.img_list[0].url : "", //视频封面
      height: "100%",
      width: "100%",
    });
    // 设置清晰度
    _this.player.emit("resourceReady", [
      { name: "高清", url: _this.curQue.video_list[0].url },
      { name: "标清", url: _this.curQue.definition_list[1].file_url },
      { name: "流畅", url: _this.curQue.definition_list[0].file_url },
    ]);
    setTimeout(() => {
      let name = document.getElementsByClassName("name")[0];
      if (name) {
        let text = name.innerText || name.textContent;
        if (!text) {
          name.innerText
            ? (name.innerText = "流畅")
            : (name.textContent = "流畅");
        }
      }
    }, 200);
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.videoView {
  width: 780px;
  height: 398px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 8px;
  position: relative;
  margin-bottom: 16px;
  video {
    width: 100%;
    height: 100%;
    object-fit: fill; //将视频标签填充整个元素
    border-radius: 8px;
    cursor: pointer;
  }
  .qxd {
    bottom: 55px;
    right: 163px;
    position: absolute;
    color: white;
    z-index: 999;
    transition: all 1s;
    cursor: pointer;
  }
  .qxdshow {
    opacity: 1;
  }
  .qxdhide {
    opacity: 0;
  }
}
</style>