Issue using a Vue component (with video.js) in rails

Question

I got this vue component in rails.

<template>
 <div class="hello">
   <h1>THIS IS VUE<h1/>

<video id="videok" class="video-js vjs-default-skin vjs-big-play-centered" 
 controls preload="auto" width="1500" height="700"
 poster="../../../assets/images/logo.png"
 data-setup='{"example_option":true}'>
<source src="../../../assets/videos/vid.mp4" type="video/mp4" />

</video>

</div>

</template>

<script lang="ts">

import { Component, Prop, Vue } from 'vue-property-decorator';
import videojs from 'video.js';


@Component
export default class VideoVue extends Vue {

 protected player: any;

 mounted() {

   this.player = videojs("videok");

}

}

</script>

<style scoped lang="css">
@import '../../src/video.js/dist/video-js.css';

</style>

I call this component as follows (from a .html.erb file)

<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

"THIS IS VUE" is rendered fine, but I'm having this error.

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

I have noticed document.getElementById('videok') is null at the time mounted() is triggered. If I do vue create ""new project" and paste the code of this component it works fine.

score 0 · Answer 1 · answered Sep 14 '19 at 21:23

I looked up their docs and I saw a very different example here: https://docs.videojs.com/tutorial-vue.html

It just instantiates the Video.js player on mounted and destroys it on beforeDestroy.

<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>

You can then use it like this: (see options guide for option information)

<template>
  <div>
        <video-player :options="videoOptions"/>
    </div>
</template>

<script>
import VideoPlayer from "@/components/VideoPlayer.vue";

export default {
    name: "VideoExample",
    components: {
        VideoPlayer
    },
    data() {
        return {
            videoOptions: {
                autoplay: true,
                controls: true,
                sources: [
                    {
                        src:
                            "/path/to/video.mp4",
                          type: "video/mp4"
                    }
                ]
            }
        };
    }
};

Don't forget to include the Video.js CSS, located at video.js/dist/video-js.css.

You'd need to check their documentation. – sevensidedmarble Dec 09 '20 at 23:57 — sevensidedmarble, Dec 09 '20 at 23:57

Issue using a Vue component (with video.js) in rails

1 Answers1