Troubleshooting problems with integrating a Vue component (including video.js) into a Rails application

Question

Troubleshooting problems with integrating a Vue component (including video.js) into a Rails application

After integrating this Vue component into my Rails project, I encountered an issue.

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

To use this component in an .html.erb file, the following script needs to be added:

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

While the text "THIS IS VUE" is displaying correctly, a specific error has arisen.

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

An observation reveals that

document.getElementById('videok')

returns as null when the mounted() function is called. Interestingly, if I create a new Vue project and paste this component code, it functions without any issues.

javascript ruby-on-rails vue.js video.js

Answer 1

Answer №1

After checking out their documentation, I came across a completely different example here:

The process involves instantiating the Video.js player on mounted and then destroying 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>

To use it properly, follow this example: (refer to the options guide for more 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"
                    }
                ]
            }
        };
    }
};

Remember to add the Video.js CSS file at video.js/dist/video-js.css.

Answer 2

After checking out their documentation, I came across a completely different example here:

The process involves instantiating the Video.js player on mounted and then destroying 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>

To use it properly, follow this example: (refer to the options guide for more 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"
                    }
                ]
            }
        };
    }
};

Remember to add the Video.js CSS file at video.js/dist/video-js.css.

Troubleshooting problems with integrating a Vue component (including video.js) into a Rails application

Answer №1

Similar questions

Unable to access Vue.js data within the Created() lifecycle hook

Tips for transmitting information from the main window to a child in JavaScript

The accuracy of Google Maps is compromised when the width is expanded

Button will be disabled unless a value is selected in the dropdown menu

Display a div in jQuery when a specific radio button is selected

Using JavaScript to set the value of a label within an ASP.NET ListView

The onClick function within the .map function is continuously triggered

Is it possible to maintain HTML, JS, and CSS files as separate entities when developing Vue.js components, similar to how it is

Include a timer in the Promise.all and map function

It appears that the JavaScript code for validating the form is not being executed

Can you pass just a single argument to a function that has two parameters?

Encountered an issue retrieving two rows nested within a parent row using Bootstrap 4 and VueJs

Get the value of a specific option within a React-bootstrap Form component

Contrasting bracket notation property access with Pick utility in TypeScript

Traversing a multidimensional array with jQuery

What is the process for adjusting the height of a scrollbar thumb?

Tips for transferring information obtained from an API to my custom HTML page

Can Offer Codes be tested in TestFlight?

"Must not be currently employed" when using window.open in a basic React application

The map pipe is malfunctioning