CODEWITHSUNDEEP
laravelvue.jsnpmvideo-streamingvideo.js
sam67
sam67

Reputation: 61

Vue JS and Video JS "ID supplied is not valid" error

I have a basic project with vue.js running and laravel but I need to play HLS videos on all browsers, so after looking I decided to use video-js.

I have installed the video-player via npm succefully and tried to copy the following guide: https://docs.videojs.com/tutorial-vue.html

But I keep getting the following console error:

[Vue warn]: Error in mounted hook: "TypeError: The element or ID supplied is not valid. (videojs)"

Why will this not work for me?

I have uploaded my code to github: https://github.com/samB67/VueVideoJS/blob/master/VideosView.vue

Mp4 videos work but not HLS videos

Upvotes: 0

Views: 7602

Answers (2)

Oguntoye Anuoluwapo
Oguntoye Anuoluwapo

Reputation: 127

For HLS videos Try to add type="application/x-mpegURL" as an attribute

Something like this: <source src="http://myurl/api/video/playlist/zfJb3Hbs5FyZKCj.m3u8" type="application/x-mpegURL" crossorigin="use-credentials"

Upvotes: 0

Hans Felix Ramos
Hans Felix Ramos

Reputation: 4424

<video-js> is not a component. Use video html tag and ref instead.

<video ref="Player" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>

on script section:

mounted() {
   videojs(this.$refs.Player);
}

Upvotes: 2

Related Questions