<template>
  <div lang="zh-cn">
    <video
      ref="videoPlayer"
      class="es-video-player video-js"
      playsinline="true"
      :muted="muted"
    ></video>
  </div>
</template>

<script>
import videojs from 'video.js';
import zhcn from 'video.js/dist/lang/zh-CN.json';
import 'video.js/dist/video-js.css';
import util from 'eoss-ui/src/utils/util';
videojs.addLanguage('zh-CN', zhcn);
export default {
  name: 'EsPlayer',
  props: {
    source: [String, Object],
    type: {
      type: String,
      default: 'application/x-mpegURL'
    },
    autoplay: Boolean,
    muted: Boolean,
    controls: {
      type: Boolean,
      default: true
    },
    fluid: {
      type: Boolean,
      default: true
    },
    aspectRatio: {
      type: String,
      default: '16:9'
    },
    height: {
      type: String,
      default: '100%'
    },
    width: {
      type: String,
      default: '100%'
    },
    notSupportedMessage: {
      type: String,
      default: '视频源数据加载错误'
    },
    isPause: Boolean,
    isDispose: Boolean
  },
  computed: {
    isObject() {
      return util.isObject(this.source);
    }
  },
  data() {
    return {
      player: null
    };
  },
  watch: {
    source(val, old) {
      if (JSON.stringify(val) !== JSON.stringify(old)) {
        if (this.isObject) {
          this.player.src({ src: val.src, type: this.type });
          if (val.poster) {
            this.player.poster(val.poster);
          }
        } else {
          this.player.src({ src: val });
        }
      }
      this.player.play();
    },
    isPause(val) {
      if (val) {
        this.player.pause();
      }
    },
    isDispose(val) {
      if (val) {
        this.player.dispose();
      }
    }
  },
  mounted() {
    this.ready();
  },
  methods: {
    ready() {
      if (this.source) {
        const options = {
          ...this.$attrs,
          language: 'zh-CN',
          autoplay: this.autoplay,
          controls: this.controls,
          fluid: this.fluid, // 按比例缩放适应容器
          aspectRatio: this.aspectRatio,
          height: this.height,
          width: this.width,
          notSupportedMessage: this.notSupportedMessage,
          sources: [
            {
              withCredentials: false,
              type: this.type,
              src: this.isObject ? this.source.src : this.source
            }
          ],
          poster: this.isObject ? this.source.poster : ''
        };
        this.player = videojs(this.$refs.videoPlayer, options, () => {
          this.$emit('ready', this.player);
        });
        //开始请求数据
        this.player.on('loadstart', () => {
          this.$emit('loadstart', this.player);
        });
        //正在请求数据
        this.player.on('progress', () => {
          this.$emit('progress', this.player);
        });
        //获取资源长度完成
        this.player.on('loadedmetadata', () => {
          this.$emit('loadedmetadata', this.player);
        });
        //视频源数据加载完成
        this.player.on('canplaythrough', () => {
          this.$emit('canplaythrough', this.player);
        });
        //等待数据
        this.player.on('waiting', () => {
          this.$emit('waiting', this.player);
        });
        //视频开始播放
        this.player.on('play', () => {
          this.$emit('play', this.player);
        });
        //视频播放中
        this.player.on('playing', () => {
          this.$emit('playing', this.player);
        });
        //视频暂停播放
        this.player.on('pause', () => {
          if (!this.isPause) {
            this.$emit('pause', this.player);
          }
        });
        //视频播放结束
        this.player.on('ended', () => {
          this.$emit('ended', this.player);
        });
        //加载错误
        this.player.on('error', () => {
          this.$emit('error', this.player);
        });
        //视频跳转中
        this.player.on('seeking', () => {
          this.$emit('seeking', this.player);
        });
        //视频跳转结束
        this.player.on('seeked', () => {
          this.$emit('seeked', this.player);
        });
        //播放速率改变
        this.player.on('ratechange', () => {
          this.$emit('ratechange', this.player);
        });
        //播放时长改变
        this.player.on('timeupdate', () => {
          this.$emit('timeupdate', this.player);
        });
        //音量改变
        this.player.on('volumechange', () => {
          this.$emit('volumechange', this.player);
        });
        //网速异常
        this.player.on('stalled', () => {
          this.$emit('stalled', this.player);
        });
      }
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>
<style></style>
