Skip to content

Instantly share code, notes, and snippets.

@command-tab
Created January 8, 2022 04:58
Show Gist options
  • Save command-tab/e8809b0857fbf6a223eb4bbf7e236751 to your computer and use it in GitHub Desktop.
Save command-tab/e8809b0857fbf6a223eb4bbf7e236751 to your computer and use it in GitHub Desktop.
An example Vue component that wraps OvenPlayer 0.10.15
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment