<template>
<div id="playerWrap">
  <div id="player">
    <p>您还没有安装flash播放器,请 <a href="http://www.adobe.com/go/getflash" target="_blank">点击这里安装</a></p>
  </div>
</div>
</template>

<style lang="scss" scoped>
#player p { color: #fff; text-align: center; padding: 50px 0; }
#player p a { color: #b01c40; text-decoration: underline; }
</style>

<script>
import swfobject from 'VideoJs'

// 播放器ID
const PLAYER_WRAP_ID = 'playerWrap'
const PLAYER_ID = 'player'
const SKIP_BEGIN_TIME = 7 // 跳过片头设置片头时间

let continueStart = 0 // 继续学习初始值

export default {
  props: {
    lastTime: { type: Number, require: false },
    videoId: { type: String, require: false },
    width: { type: Number, require: false },
    height: { type: Number, require: false },
    username: { type: String, require: false },
    videoSrt: { type: String, require: false },
    autoPlay: { type: Boolean, require: false, default: true },
    chapterVideo: { type: Object, require: false }
  },
  mounted () {
    this.definWindowFun()
    // console.log(PLAYER_ID, this.videoId, this.autoPlay, this.videoSrt, this.username, this.width, this.height)
    // this.renderPlayer(PLAYER_ID, this.videoId, this.autoPlay, this.videoSrt, this.username, this.width, this.height)
  },
  watch: {
    videoId: {
      handler () {
        if (this.videoId) {
          /* 注意 flash 初始化时，需要页面DOM存在 + videoId存在 */
          continueStart = this.lastTime || 0 // 如果传递有上次播放时间，则记录缓存，以便player.start时使用
          this.renderPlayer(PLAYER_ID, this.videoId, this.autoPlay, this.videoSrt, this.username, this.width, this.height)
        }
      }
    }
  },
  methods: {
    /* 定义windows下，播放事件和初始化回调 */
    definWindowFun () {
      let that = this
      // 开始播放，如果设置了跳过片头则设置播放时间
      window._playerStart = function () {
        if (/skip=1/.test(document.cookie)) {
          that.getPlayer().callAction('setCurrentTime', Math.max(continueStart, SKIP_BEGIN_TIME)) // 跳到第6秒开始播放
        } else if (continueStart) {
          that.getPlayer().callAction('setCurrentTime', continueStart)
        }
      }
      // 播放过程中不断触发，传递当前播放到的时间
      window._playerIng = function (time) {
        $('#' + PLAYER_WRAP_ID).trigger('player.time', { time, quality: that.getPlayer().callAction('getQuality'), isSeek: false })
      }
      // 拖动播放进度条
      window._playerSeek = function () {
        $('#' + PLAYER_WRAP_ID).trigger('player.seek', { time: that.getPlayer().callAction('getCurrentTime'), quality: that.getPlayer().callAction('getQuality'), isSeek: true })
      }
      // 视频播放结束
      window._playerFinish = function () {
        that.$emit('handlePlayfinish', { time: that.getPlayer().callAction('getDuration') })
      }
      // 播放控件 - 初始化完成时，注册播放事件
      window._playerCallback = function () {
        let player = that.getPlayer()
        if (player) {
          // player.register('onLoadStart', '') // 开始loading加载
          player.callAction('register', 'onCanplay', '_playerStart') // 开始播放视频内容
          player.callAction('register', 'onPlaying', '_playerIng') // 播放中触发，300ms一次
          // player.register('onPause', '') // 暂停
          // player.register('onResume', '') // 恢复播放
          player.callAction('register', 'onSeekComplete', '_playerSeek') // 拖动进度条
          player.callAction('register', 'onEnded', '_playerFinish') // 结束
        }
      }
    },
    /* flash swf视频 对象渲染 采用 VideoJs插件渲染 */
    renderPlayer (domId, vid, autoPlay, srt, username, width, height) {
      autoPlay = typeof autoPlay === 'undefined' ? 1 : autoPlay - 0

      // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
      let swfVersionStr = '11.1.0'
      // To use express install, set to playerProductInstall.swf, otherwise the empty string.
      let xiSwfUrlStr = 'playerProductInstall.swf'
      let flashvars = {
        autoStart: autoPlay,
        vid: vid,
        isShowSpeeder: 1,
        videoType: 1, // 0为mp4模式 1为cc模式
        callback: '_playerCallback'
      }
      if (srt) { flashvars.srtUrl = srt }
      if (username) { flashvars.username = username }
      // flashvars.videoType = 1; // 0为mp4模式 1为cc模式
      let params = {
        quality: 'high',
        bgcolor: '#000000',
        allowscriptaccess: 'always',
        allowfullscreen: 'true'
      }
      let attributes = {
        id: domId,
        name: domId,
        align: 'middle',
        wmode: 'opaque'
      }
      // render
      swfobject.embedSWF(
        // require('player'),
        '/static/videoJs/swf/Player1705192.swf',
        domId,
        parseInt(width),
        parseInt(height),
        swfVersionStr,
        xiSwfUrlStr,
        flashvars,
        params,
        attributes
      )
      // 绑定事件监听
      this.listenPlayerEvents()
    },
    listenPlayerEvents () {
      $('#' + PLAYER_WRAP_ID).off('player.time player.seek').on('player.time player.seek', (e, data) => {
        this.$emit('handlePlayTime', data)
      })
    },
    // ========= 提供播放后，其他组件可使用控制播放的方法 ===========
    // 获取视频对象
    getPlayer () {
      return document.getElementById(PLAYER_ID)
    },
    getTime () {
      let player = this.getPlayer()
      if (player) {
        return player.callAction('getCurrentTime')
      } else {
        return 0
      }
    },
    // 设置视频跳转时间
    setTimeTo (time) {
      let player = this.getPlayer()
      if (player) {
        player.callAction('setCurrentTime', time + 2) // flash实际播放值会大概小个一两秒，因此添加偏移
      }
    },
    // 执行“跳过片头”操作
    skipBegin () {
      let player = this.getPlayer()
      if (player && player.callAction('getCurrentTime') < SKIP_BEGIN_TIME) {
        player.callAction('setCurrentTime', SKIP_BEGIN_TIME)
      }
    },
    // 设置视频尺寸
    setSize (w, h) {
      let player = this.getPlayer()
      if (player) {
        player.width = w
        player.height = h
      }
    }
  }
}
</script>
