I have been experimenting with integrating the videojs-vr package, which I installed through npm, into a Vue.js component. However, I encountered an error:
TypeError: videojs is not a function
at VueComponent.mounted (VR.vue?d2da:23)
at callHook (vue.esm.js?65d7:2701)
at Object.insert (vue.esm.js?65d7:3588)
at invokeInsertHook (vue.esm.js?65d7:5541)
at VueComponent.patch [as __patch__] (vue.esm.js?65d7:5744)
at VueComponent.Vue._update (vue.esm.js?65d7:2460)
I attempted to either import or require the library but there seems to be an issue with how I am using the npm module. Any guidance on resolving this would be greatly appreciated.
<template>
<div class="videojs-vr" style="width: 100%; height:100%;">
<video id="videojs-vr-player" class="video-js vjs-default-skin" controls>
<source src="./static/videos/sample.mp4" type="video/mp4">
</video>
</div>
</template>
<script>
var videojs = require('videojs-vr');
// import videojs from 'videojs-vr';
export default {
name: 'videojs-vr',
mounted() {
var player = videojs('videojs-vr-player');
player.mediainfo = player.mediainfo || {};
player.mediainfo.projection = '360';
// AUTO is the default and looks at mediainfo
player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
},
};
</script>