Not receiving duration of video using videojs in Vue component - vue.js

Question

Using Vue 2 and Video.js 7 I am trying to show a video through a conditional component (sometimes I need to show an iframe instead of videojs). The video (.m3u8 and .mp4) loads but the duration is shown as "--:-" and clicking the seek bar gives an error in the console:
VIDEOJS: TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.
at Html5.setCurrentTime (video.es.js?c063:19084:1)
at set (video.es.js?c063:9410:1)
at Player.eval (video.es.js?c063:22620:1)
at Player.ready (video.es.js?c063:3756:1)
at Player.techCall_ (video.es.js?c063:22618:1)
at Player.currentTime (video.es.js?c063:22874:1)
at SeekBar.handleMouseMove (video.es.js?c063:13106:1)
at SeekBar.handleMouseDown (video.es.js?c063:12181:1)
at SeekBar.handleMouseDown (video.es.js?c063:13055:1)
at ProgressControl.handleMouseDown (video.es.js?c063:13448:1) Video is not ready. (Video.js)
I noticed that videojs returns NaN as duration, even after the metadata loaded. Other than that I have no clue what's going wrong or how I can make it so videojs has a useable duration.
main.vue
<template>
<div>
<videoPlayer
:playerData="data.player.VIDEO_PLAYER"
ref="videoPlayer"
#playerReady="playerReady"
></videoPlayer>
</div>
</template>
<script>
import videoPlayer from "components/player";
export default {
name: "Name",
data() {
return {
playerIsReady: false,
currentVideoTime: 0,
};
},
components: {
videoPlayer,
},
methods: {
playerReady(status) {
this.playerIsReady = status;
},
checkTimePlayer() {
const self = this;
this.playerInterval = setInterval(function () {
self.currentVideoTime = self.$refs.videoPlayer
? self.$refs.videoPlayer.getCurrentTime()
: 0;
}, 500);
},
},
watch: {
playerIsReady(newVal) {
if (newVal) {
this.checkTimePlayer();
} else if (this.playerInterval) {
clearInterval(this.playerInterval);
}
},
},
};
</script>
player.vue
<template>
<div>
<videoPlayerVideojs
v-if="playerData.stream_type == 'videojs'"
:options="options"
ref="videoPlayerVideomeojs"
#playerReady="playerReady"
></videoPlayerVideojs>
<videoPlayerSomethingElse
v-else-if="playerData.stream_type == 'somethingElse'"
:options="options"
ref="videoPlayerSomethingElse"
></videoPlayerSomethingElse>
</div>
</template>
<script>
import videoPlayerVideojs from "components/playerVideojs";
import videoPlayerSomethingElse from "components/playerSomethingElse";
export default {
name: "VideoPlayer",
props: {
playerData: {
type: Object,
required: true,
},
},
components: {
videoPlayerVideojs,
videoPlayerSomethingElse,
},
data() {
return {
player: null,
options: {},
};
},
mounted() {
if (this.playerData.stream_type === "videojs") {
this.options = {
preload: "auto",
fluid: true,
autoplay: true,
controls: true,
sources: [
{
src: "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
type: "video/mp4",
},
],
};
this.player = this.$refs.videoPlayerVideojs;
} else if (this.playerData.stream_type === "somethingElse") {
// something ... else
this.player = this.$refs.videoPlayerSomethingElse;
}
},
methods: {
getCurrentTime() {
return this.player.getCurrentTime();
},
playerReady(status) {
this.$emit("playerReady", status);
},
},
};
</script>
playerVideojs.vue
<template>
<div>
<video ref="video" class="video-js"></video>
</div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
name: "VideoPlayerVideojs",
props: {
options: {
type: Object,
required: true,
},
},
data() {
return {
player: null,
ready: false,
currentVideoTime: 0,
};
},
async mounted() {
const self = this;
await this.$nextTick();
this.player = videojs(
this.$refs.video,
this.options
);
this.player.on("ready", () => {
console.log("ready");
console.log(this.player.readyState());
console.log(this.player.duration());
console.log(this.player.liveTracker.seekableEnd());
});
this.player.on("loadedmetadata", () => {
console.log("loaded metadata");
self.ready = true;
console.log(this.player.readyState());
console.log(this.player.duration());
console.log(this.player.liveTracker.seekableEnd());
});
this.player.on("durationchange", () => {
console.log("duration change");
console.log(this.player.readyState());
console.log(this.player.duration());
console.log(this.player.liveTracker.seekableEnd());
});
},
watch: {
ready(newVal) {
this.$emit("playerReady", newVal);
},
},
methods: {
getCurrentTime() {
return this.player.currentTime();
},
},
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
},
};
</script>
The console outputs
14:31:33.682 playerVideojs.vue?5887:40 ready
14:31:33.682 playerVideojs.vue?5887:42 0
14:31:33.682 playerVideojs.vue?5887:43 NaN
14:31:33.682 playerVideojs.vue?5887:44 Infinity
14:31:34.085 playerVideojs.vue?5887:54 duration change
14:31:34.085 playerVideojs.vue?5887:56 1
14:31:34.085 playerVideojs.vue?5887:57 NaN
14:31:34.085 playerVideojs.vue?5887:58 596.504
14:31:34.085 playerVideojs.vue?5887:47 loaded metadata
14:31:34.085 playerVideojs.vue?5887:49 1
14:31:34.085 playerVideojs.vue?5887:50 NaN
14:31:34.086 playerVideojs.vue?5887:51 596.504
Via Vue devtools I've compared the player on the Vue page with a working player on a non-Vue page. And found that player.controlBar.durationDisplay.duration is "NaN" for the Vue player and a float for the non-Vue player.
Also when using an .m3u8 I notice that player.vhs.playlists.media_.id is 2 for the Vue player and 1 for the non-Vue player. Could it be that the media I'm trying to load is the second time the player tries to load media?
Other than that the players are pretty much identical as far as I can see.