<template>
  <div id="app">
    <template>
      <Vue263player :source="source"
                    :audioSource="audioSource"
                    ref="VueAliplayerV2"
                    :options="options"
                    @micStatusChange="micStatusChange"
                    @audioStatusChange="audioStatusChange"
                    @baberrageStatusChange="baberrageStatusChange"
                    @error="playerError"
                    style="position: relative;">
        <div class="Vue263playerSlot">用来显示其他内容，在播放器内</div>
      </Vue263player>
    </template>
    <div class="player-btns">
      <template v-if="show">
        <span @click="changePlay('liveAV')">切换播放音视频</span>
        <span @click="changePlay('liveA')">切换播放纯音频</span>
        <span @click="changePlay('playBack')">切换播放回放</span>
        <p></p>
        <span @click="play()">播放</span>
        <span @click="pause()">暂停</span>
        <span @click="replay()">重播</span>
        <span @click="lianmai()">连麦</span>
        <span @click="addBarrage()">添加弹幕</span>
        <span @click="disconnectMic()">下麦</span>
        <span @click="getCurrentTime()">播放时刻</span>
        <span @click="getStatus()">获取播放器状态</span>
        <span @click="mute">静音</span>
        <span @click="unmute">取消静音</span>
      </template>
      <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      options: {
        isLive: !false,   //切换为直播流的时候必填
        autoplay: true,
        rePlay: false,
        playsinline: true,
        preload: true,
        controlBarVisibility: "hover",
        useH5Prism: true,
        mediaType: 'video',
      },
      roomOptions: {
        themeColor: '#2081eb',  // 主题色  默认: '#2081eb'
        bgUrl: '',     //播放器背景url
      },
      source: JSON.stringify({ 'LD': 'http://119.61.7.138:10002/live/test0_customud.m3u8', 'SD': '//ivi.bupt.edu.cn/hls/cctv1.m3u8' }),
      audioVideosource: JSON.stringify({ 'LD': 'http://119.61.7.138:10002/live/test0_customud.m3u8', 'SD': '//ivi.bupt.edu.cn/hls/cctv1.m3u8' }),
      audioSource: 'http://119.61.7.138:10002/audio/test0_customud.m3u8',
      playBackSource: JSON.stringify({ 'LD': 'http://player.alicdn.com/video/1.mp4', 'SD': 'http://player.alicdn.com/video/1.mp4' }),
      // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
      //http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
      show: true,
      curPlayerStatus: 'liveAV',
    }
  },

  methods: {
    //  liveAV  liveA playBack
    changePlay (status) {
      if (status == 'liveAV') {
        this.source = this.audioVideosource;
        this.options.isLive = true;
        this.options.mediaType = 'video';
      } else if (status == 'liveA') {
        this.source = this.audioSource;
        this.options.isLive = true;
        this.options.mediaType = 'audio';
      } else {
        this.source = this.playBackSource;
        this.options.isLive = false;
        this.options.mediaType = 'video';
      }
    },
    play () {
      this.$refs.VueAliplayerV2.play()
    },

    pause () {
      this.$refs.VueAliplayerV2.pause();
    },
    lianmai () {
      this.$refs.VueAliplayerV2.connectMic({ roomId: '4151738257', userName: 'dyy3' });
    },
    replay () {
      this.$refs.VueAliplayerV2.replay();
    },

    getCurrentTime () {
      this.$refs.VueAliplayerV2.getCurrentTime();
    },

    getStatus () {
      const status = this.$refs.VueAliplayerV2.getStatus();
      console.log(`getStatus:`, status);
    },
    mute () {
      this.$refs.VueAliplayerV2.mute();
    },
    unmute () {
      this.$refs.VueAliplayerV2.unMute();
    },
    // 连麦状态发生改变触发
    //连麦状态： 0->未连麦  1->正在连麦中  2->已连麦  3->被下麦 4->主动下麦成功 5->连麦失败
    micStatusChange (micStatus) {
      console.log(micStatus)
    },
    // 连麦麦克风状态发生改变：例如被主持人静音/解除静音
    // audioStatus  "inactive" or "active" 静音/解除静音
    audioStatusChange (audioStatus) {
      console.log(audioStatus)
    },
    // 主动下麦
    disconnectMic () {
      this.$refs.VueAliplayerV2.disconnectMic();
    },
    /***
     * 直播模式添加弹幕
     */
    addBarrage () {
      this.$refs.VueAliplayerV2.addBarrage();
    },
    /***
     * 
     * 弹幕开关状态发生改变
     */
    baberrageStatusChange (value) {
      console.log(value);
    },
    /***
     * 播放错误
     */
    playerError (err) {
      console.log(err)
    }
  }
}
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.remove-text {
  text-align: center;
  padding: 20px;
  font-size: 24px;
}
.Vue263playerSlot {
  position: absolute;
  z-index: 1111111;
  color: red;
}
.show-multiple {
  display: flex;
  .multiple-player {
    width: calc(100% / 4);
    margin: 20px;
  }
}
.player-btns {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  span {
    margin: 0 auto;
    display: inline-block;
    padding: 5px 10px;
    width: 150px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #eee;
    background: #e1e1e1;
    border-radius: 10px;
    text-align: center;
    margin: 5px;
    cursor: pointer;
  }
}
.source-box {
  padding: 5px 10px;
  margin-bottom: 10px;
  .source-label {
    margin-right: 20px;
    font-size: 16px;
    display: block;
  }
  #source {
    margin-top: 10px;
  }
  .source-input {
    margin-top: 10px;
    padding: 5px 10px;
    width: 80%;
    border: 1px solid #ccc;
  }
}
</style>
