How to use xgplayer - 10 common examples

render () {
    // console.log('[template]render:')
    if (!this.template) {
      throw new Error('未设置template')
    }
    const compiled = compile(this.template, this.options)

    // console.log('[template]compiled:', compiled)

    const astCompiler = new ASTCompiler(this.element, compiled, this.model, {
      inject: {
        $player: this.player, // 注入$player对象
        $util: Player.util // 注入$util对象
      }
    })
    // const mvvm = new MVVM({
    //   el: this.element,
    //   data: this.model.data,
    //   mounted: this.model.mounted,
    //   methods: this.model.methods,
    //   templateDescriptor: compiled
    // })

    // 插入template的css
    // TODO: 考虑会影响其他样式，考虑加入scoped
    const style = insertCss(this.style)
    // console.log('[template]css injected:', compiled)
  }
}

this.loader.load(this._player.config.url).catch(() => {
      // 在尝试获取视频数据失败时，尝试使用直播方式加载整个视频
      this._player.emit('error', new Player.Errors('network', this._player.config.url))
    })
  }

constructor (options) {
    super(options)
    let self = this
    this.shakaOpts = options.shakaOpts || {}
    this.util = Player.util
    this.player = this
    this.url = this.player.config.url
    this.sniffer = Player.sniffer
    this.player_ = null
    this.content = []

    Shaka.polyfill.installAll()

    if (Shaka.Player.isBrowserSupported()) {
      this.video_ = this.player.video
      this.video_.autoplay = false
      this.player_ = new Shaka.Player(this.video_)

      this.player_.addEventListener('error', function (event) {
        console.error('Error code', event.detail.code, 'object', event.detail) // eslint-disable-line no-console
      })

      if (this.shakaOpts) {
        this.player_.configure(this.shakaOpts)

import Player from 'xgplayer'
import Template from './Template'
import learningTemplate from '../templateExamples/learning'

const templatePlugin = function (player) {
  // TODO: 模版可配置化
  // TODO: 异步加载模版
  // TODO: 组件化机制
  const template = new Template(`#${player.config.id}`, learningTemplate, this)
  template.render()
}

Player.install('template', templatePlugin)

let mp4player = function () {
  let player = this; let sniffer = Player.sniffer; let util = Player.util
  let Errors = Player.Errors; let mainURL; let backupURL
  let preloadTime = player.config.preloadTime || 15
  let waiterTimer
  let url = player.config.url
  let rule = player.config.pluginRule || function () { return true }
  if (!url) {
    player.emit('error', new Errors('other', player.config.vid))
    return
  }
  if (util.typeOf(url) === 'String') {
    mainURL = url
  } else if (util.typeOf(url) === 'Array' && url.length) {
    mainURL = url[0].src
    backupURL = url[1].src
  }
  player.config._mainURL = mainURL

createInstance (flv) {
    const player = this
    const util = Player.util
    flv.attachMediaElement(player.video)
    flv.load()
    flv.play()
    if (this.flvOpts.isLive) {
      util.addClass(player.root, 'xgplayer-is-live')
      const live = util.createDom('xg-live', '正在直播', {}, 'xgplayer-live')
      player.controls.appendChild(live)
    }
    flv.on(Flv.Events.ERROR, (e) => {
      player.emit('error', new Player.Errors('other', player.config.url))
    })

    player.once('destroy', () => {
      flv.destroy()
      player.__flv__ = null
    })

show () {
    let dom = this.dom
    let lyrbicTxts = []
    let self = this
    const ev = ['click', 'touchstart']
    if (dom && dom.nodeType === 1) {
      const lrcWrap = Player.util.createDom('div', `<div></div>`, {}, 'xgplayer-lrcWrap')
      dom.appendChild(lrcWrap)
      this.list.forEach(item =&gt; {
        lyrbicTxts.push(`${item.lyric.replace(/[\r\n]/g, '')}`)
      })
      lrcWrap.innerHTML = lyrbicTxts.join('')
      const lrcForward = Player.util.createDom('xg-lrcForward', `<div></div>`, {}, 'xgplayer-lrcForward')
      dom.appendChild(lrcForward)
      ev.forEach(item =&gt; {
        lrcForward.addEventListener(item, function (e) {
          e.preventDefault()
          e.stopPropagation()
          self.offset -= self.offsetScale
          console.log(`lyric go forward ${self.offsetScale}s`)
        }, false)
      })

      const lrcBack = Player.util.createDom('xg-lrcBack', `<div></div>`, {}, 'xgplayer-lrcBack')
      dom.appendChild(lrcBack)
      ev.forEach(item =&gt; {
        lrcBack.addEventListener(item, function (e) {
          e.preventDefault()
          e.stopPropagation()

flv.on(Flv.Events.ERROR, (e) => {
      player.emit('error', new Player.Errors('other', player.config.url))
    })

_handleDemuxError () {
    this._player.emit('error', new Player.Errors('parse', this._player.config.url))
  }

this.__core__.once(HLS_EVENTS.RETRY_TIME_EXCEEDED, () => {
      this.emit('error', new Player.Errors('network', this.config.url))
    })