I am facing an issue with Video.js when using it as a component in vue.js. I receive a .mpd link from a server and I want to display the video from that link. Following the example in the documentation of Video.js and Vue integration.
Every time I call the VideoPlayer for the first time, I encounter an error:
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.
If I go back to the previous page and then return to the VideoPlayer, it works fine. However, refreshing the page does not resolve the issue.
P.S: I am utilizing Vuex to fetch all data from the server.
Below is my code for Stream.vue:
<template>
<div class="container">
<h1 class="text-center">MediaPlayer for: {{ mediaName }}</h1>
<video-player :options="videoOptions" />
</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import VideoPlayer from "@/components/VideoPlayer.vue";
export default {
name: "Stream",
props: ["stream_id", "source"],
components: {
VideoPlayer
},
created() {
this.fetchStream(this.stream_id);
},
computed: {
...mapState("stream", ["stream", "mediaName"]),
videoOptions() {
return {
autoplay: false,
controls: true,
sources: [
{
src: this.stream.stream_link,
type: "application/dash+xml"
}
],
poster:"http://placehold.it/380?text=DMAX Video 2"
};
}
},
methods: {
...mapActions("stream", ["fetchStream"])
}
};
</script>
<style scoped></style>
And here is VideoPlayer.vue:
<template>
<div>
<video ref="videoPlayer" class="video-js"></video>
</div>
</template>
<script>
import videojs from "video.js";
export default {
name: "VideoPlayer",
props: {
options: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
player: null
};
},
mounted() {
this.player = videojs(
this.$refs.videoPlayer,
this.options,
function onPlayerReady() {
console.log("onPlayerReady", this);
}
);
},
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
}
};
</script>