68 lines
1.3 KiB
JavaScript
68 lines
1.3 KiB
JavaScript
|
import Vue from 'vue'
|
||
|
|
import FtCard from '../ft-card/ft-card.vue'
|
||
|
|
|
||
|
|
// I haven't decided which video player I want to use
|
||
|
|
// Need to expirement with both of them to see which one will work best.
|
||
|
|
import videojs from 'video.js'
|
||
|
|
// import mediaelement from 'mediaelement'
|
||
|
|
|
||
|
|
export default Vue.extend({
|
||
|
|
name: 'FtVideoPlayer',
|
||
|
|
components: {
|
||
|
|
'ft-card': FtCard
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
default: () => { return [] }
|
||
|
|
},
|
||
|
|
src: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: function () {
|
||
|
|
return {
|
||
|
|
id: '',
|
||
|
|
player: null,
|
||
|
|
dataSetup: {
|
||
|
|
aspectRatio: '16:9',
|
||
|
|
playbackRates: [
|
||
|
|
0.25,
|
||
|
|
0.5,
|
||
|
|
0.75,
|
||
|
|
1,
|
||
|
|
1.25,
|
||
|
|
1.5,
|
||
|
|
1.75,
|
||
|
|
2,
|
||
|
|
2.25,
|
||
|
|
2.5,
|
||
|
|
2.75,
|
||
|
|
3
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
listType: function () {
|
||
|
|
return this.$store.getters.getListType
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted: function () {
|
||
|
|
this.id = this._uid
|
||
|
|
setTimeout(this.initializePlayer, 100)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initializePlayer: function () {
|
||
|
|
console.log(this.id)
|
||
|
|
const videoPlayer = document.getElementById(this.id)
|
||
|
|
console.log(videoPlayer)
|
||
|
|
if (videoPlayer !== null) {
|
||
|
|
this.player = videojs(videoPlayer)
|
||
|
|
console.log(videojs.players)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|