An example Vue component that wraps OvenPlayer 0.10.15

OvenPlayer.vue

<template>
  <div class="ovenplayer">
    <div ref="player" />
  </div>
</template>

<script>
import OvenPlayer from 'ovenplayer'

export default {
  name: 'OvenPlayer',
  props: {
    options: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data () {
    return {
      player: null
    }
  },
  mounted () {
    // Omit rendering in server-side environments
    if (!window || process.server) {
      return
    }

    this.player = OvenPlayer.create(this.$refs.player, this.options)

    // Bind OvenPlayer events to Vue events
    this.player.on('ready', () => {
      this.$emit('ready')
    })
    this.player.on('metaChanged', (obj) => {
      this.$emit('metaChanged', obj)
    })
    this.player.on('stateChanged', (obj) => {
      this.$emit('stateChanged', obj)
    })
    this.player.on('resized', (newSize) => {
      this.$emit('resized', newSize)
    })
    this.player.on('playbackRateChanged', (newRate) => {
      this.$emit('playbackRateChanged', newRate)
    })
    this.player.on('seek', (obj) => {
      this.$emit('seek', obj)
    })
    this.player.on('seeked', () => {
      this.$emit('seeked')
    })
    this.player.on('time', (obj) => {
      this.$emit('time', obj)
    })
    this.player.on('bufferChanged', (obj) => {
      this.$emit('bufferChanged', obj)
    })
    this.player.on('mute', (newVolumePercentage) => {
      this.$emit('mute', newVolumePercentage)
    })
    this.player.on('volumeChanged', (newVolumePercentage) => {
      this.$emit('volumeChanged', newVolumePercentage)
    })
    this.player.on('playlistChanged', (newPlaylistIndex) => {
      this.$emit('playlistChanged', newPlaylistIndex)
    })
    this.player.on('sourceChanged', (qualityIndex) => {
      this.$emit('sourceChanged', qualityIndex)
    })
    this.player.on('qualityLevelChanged', (obj) => {
      this.$emit('qualityLevelChanged', obj)
    })
    this.player.on('cueChanged', (obj) => {
      this.$emit('cueChanged', obj)
    })
    this.player.on('timeDisplayModeChanged', (mode) => {
      this.$emit('timeDisplayModeChanged', mode)
    })
    this.player.on('adChanged', (obj) => {
      this.$emit('adChanged', obj)
    })
    this.player.on('adTime', (obj) => {
      this.$emit('adTime', obj)
    })
    this.player.on('adComplete', () => {
      this.$emit('adComplete')
    })
    this.player.on('fullscreenChanged', (isFullscreen) => {
      this.$emit('fullscreenChanged', isFullscreen)
    })
    this.player.on('clicked', (obj) => {
      this.$emit('clicked', obj)
    })
    this.player.on('allPlaylistEnded', () => {
      this.$emit('allPlaylistEnded')
    })
    this.player.on('hlsPrepared', (obj) => {
      this.$emit('hlsPrepared', obj)
    })
    this.player.on('hlsDestroyed', () => {
      this.$emit('hlsDestroyed')
    })
    this.player.on('dashPrepared', (obj) => {
      this.$emit('dashPrepared', obj)
    })
    this.player.on('dashDestroyed', () => {
      this.$emit('dashDestroyed')
    })
    this.player.on('destroy', () => {
      this.$emit('destroy')
    })
  },
  beforeDestroy () {
    if (this.player) {
      this.player.remove()
    }
  }
}
</script>