<!-- 視頻組件 -->
<template>
  <div class="video-wrapper" :style="{height:height}">
    <!--
            1. src: 视频的地址
            2. controls: 加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
            3. poster: 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。
            4. preload: 属性规定在页面加载后载入视频。
            5. webkit-playsinline和playsinline: 视频播放时局域播放，不脱离文档流 。但是这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而ISO的WeChat却支持。这里就要补充下，如果是想做全屏直播或者全屏H5体验的用户，IOS需要设置删除 webkit-playsinline 标签，因为你设置 false 是不支持的 ，安卓则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。 做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放
            6. x-webkit-airplay="allow" : 这个属性应该是使此视频支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐还有照片文件，也就是说通过AirPlay功能可以实现影音文件的无线播放，当然前提是播放的终端设备也要支持相应的功能
            7. x5-video-player-type: 启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS。至于为什么同层播放只对安卓开放，是因为安卓不能像ISO一样局域播放，默认的全屏会使得一些界面操作被阻拦，如果是全屏H5还好，但是做直播的话，诸如弹幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题。不过在测试的过程中发现，不同版本的IOS和安卓效果略有不同
            8. x5-video-orientation: 声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式
            9. x5­-video­-player­-fullscreen:全屏设置。它又两个属性值，ture和false，true支持全屏播放，false不支持全屏播放。其实，IOS 微信浏览器是Chrome的内核，相关的属性都支持，也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核，一些属性标签比如playsinline就不支持，所以始终全屏。
    -->

    <!--
            poster="images.jpg" /*视频封面*/
            preload="auto"
            webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
            playsinline="true"  /*IOS微信浏览器支持小窗内播放*/
            x-webkit-airplay="allow"
            x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
            x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
            x5-video-orientation="portraint" //播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏
            style="object-fit:fill">
    -->
    <!-- <video
            id="video"
            src="video.mp4"
            poster="images.jpg" /*视频封面*/
            preload="auto" /* 預加載 */
            webkit-playsinline="true"
            playsinline="true"
            x-webkit-airplay="allow"
            x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性 h5-page*/
            x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
            x5-video-orientation="portraint" //播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏
            style="object-fit:fill"
    ></video>-->

    <!-- .dplayer-hide-controller 隐藏控制栏 -->

    <div class="dplayer dplayer-hide-controller"></div>
    <transition name="video" mode="out-in" v-if="showPlayIcon">
      <van-icon name="play-circle-o" title="播放按钮" v-if="!isPlay" @click="handlePlay" />
    </transition>
    <!-- 隐藏视频控制器 -->
    <!-- $0.classList.add('dplayer-hide-controller') -->
  </div>
</template>
<script>
// 使用dplayer插件
/** 查看文档 http://dplayer.js.org/zh/guide.html#special-thanks */
// import "dplayer/dist/DPlayer.min.css";
import DPlayer from "dplayer";
export default {
  name: "lj-video",
  props: {
    /** 视频配置信息 */
    options: {
      type: Object,
      required: true
      //options: {
      //     container: "#lj-video",
      //     video: {
      //         url:
      //             "//api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
      //         pic:
      //             "https://i0.hdslb.com/bfs/bangumi/e86ca4521cbe8e860b83ccae74c7306272e8d95d.jpg@268w_358h.webp"
      //     }
      // }
    },
    // 视频盒子高度
    height: {
      type: String,
      default: "230px"
    },
    // 视频暂停时正中心显示播放按钮
    showPlayIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dp: null, //視頻對象
      isPlay: false //是否在播放中
    };
  },
  mounted() {
    this.videoInit();
  },
  methods: {
    // 視頻組件初始化
    videoInit(options = this.options) {
      let selector = `${
        options.container ? options.container : ".video-wrapper"
      } .dplayer`;

      this.$nextTick(() => {
        let videoDom = document.querySelector(selector); //视频默认类名元素  .dplayer
        options.container = videoDom;

        this.dp = new DPlayer({
          ...{
            container: videoDom, //默认类名元素  .video-wrapper .dplayer  注意：有多个视频元素时必填(例如：#video01 .dplayer)
            loop: false, // 是否循环播放
            lang: "zh-cn", //语言
            preload: "none", //视频预加载 可选值=> none metadata auto
            video: {
              // url:
              //     "//api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4"
            } //视频信息
          },
          ...options
        });

        // 显示播放按钮
        this.isPlay = false;

        // 设置同层播放
        this.dp.video.setAttribute("x5-video-player-type", "h5-page");
        this.dp.video.setAttribute("t7-video-player-type", "inline");
        this.dp.video.setAttribute("x-webkit-airplay", "allow");
        // 自动控制视频方向
        this.dp.video.setAttribute(
          "x5-video-orientation",
          "landscape|portrait"
        );
        // this.dp.play();
        // 绑定事件
        this.bindEvent();
      });
    },
    //视频组件事件处理
    bindEvent() {
      // 播放结束事件
      this.dp.on("ended", () => {
        console.log("player ended =>播放结束");
        this.isPlay = false;
        this.$emit("ended");
      });
      // 开始播放事件
      this.dp.on("play", () => {
        console.log("player play =>开始播放");
        this.isPlay = true;
        this.$emit("play");
      });
      // 暂停事件
      this.dp.on("pause", () => {
        console.log("player pause =>播放暂停");
        this.isPlay = false;
        this.$emit("pause");
      });
      // 全屏事件
      this.dp.on("fullscreen", () => {
        console.log("player fullscreen =>视频全屏播放");
        this.$emit("fullscreen");
      });
      // 退出全屏事件
      this.dp.on("fullscreen_cancel", () => {
        console.log("player fullscreen =>退出全屏");
        this.$emit("fullscreen_cancel");
      });
    },
    // 点击播放
    handlePlay() {
      this.dp.play();
      if (!this.dp.video.src) {
        setTimeout(() => {
          this.dp.pause();
        }, 500);
      }
    },
    // 判断是否在播放中
    judgeIsPlay() {
      return !!(
        this.dp.video.currentTime > 0 &&
        !this.dp.video.paused &&
        !this.dp.video.ended &&
        this.dp.video.readyState > 2
      ); //readyState 0,1,2,3,4  3,4状态可以播放
    }
  },
  watch: {
    options(newOptions, old) {
      // 销毁播放器
      this.dp.destroy();
      // 重新设置视频dom对象
      this.videoInit(newOptions);
    }
  }
};
</script>
<style lang='less' scoped>
.video-wrapper {
  position: relative;
  max-height: 100vh;
  /deep/ .dplayer {
    height: 100%;

    // 手机端视频页面全屏按钮不显示
    &.dplayer-mobile
      .dplayer-controller
      .dplayer-icons
      .dplayer-full
      .dplayer-full-in-icon {
      display: none;
    }
    // 手机端设置倍速播放按钮不显示
    .dplayer-controller .dplayer-icons .dplayer-setting {
      display: none;
    }
  }

  // 开始播放按钮
  .van-icon {
    position: absolute;
    font-size: 1.6rem;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

// 过渡效果
.video-enter-active {
  animation: fadeIn 3s both;
}
.video-leave-active {
  opacity: 0;
}
</style>
