Leverage videojs-vr within a Vue.js component

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>
javascriptnpmvue.jsvideo.js

Answer №1

To begin, you must import the video.js module and assign that as the videojs variable. After that, you just need to import the videojs-vr module without assigning it to any specific variable.

You can find an example in the official documentation:

var videojs = require('video.js');

// The actual plugin functionality is included in this module, but it is also
// accessible through the `Player.prototype`, so there's no necessity to store it
// in a variable.
require('videojs-vr');

var player = videojs('my-video');

player.vr({projection: '360'});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on downloading jsreport in .Net using C# without opening it

I am using JS Report to generate a file and save it in the root directory. However, I want the file to be downloaded directly instead of opening for viewing. var header = await _jsReportMVCService.RenderViewToStringAsync(HttpContext, RouteData, "H ...

javascriptc#jqueryasp.netasp.net-core

Issues with reloading when passing POST variables through Ajax requests

I have a button with the id #filter <input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" /> Below is the Ajax script I am using: <script> $(document).ready(function(){ $('#filter').click(function() ...

javascriptphpajax

A guide on extracting content from a PDF file with JavaScript

Hey there, I'm experimenting with various methods to extract content from a PDF file but so far nothing seems to be working for me. Even when I try using pdf.js, it shows an error and I can't figure out why. This is the approach I've been tr ...

javascriptreactjspdf.js

Stop the Router from Displaying the Page momentarily prior to Redirecting

Currently, I have set up a session context for my NextJS application where users accessing pages within the /app/ directory are required to undergo an authorization check before being granted access. Although the logic is functioning correctly in redirect ...

javascriptreactjsnext.js

Display the QWebEngineView page only after the completion of a JavaScript script

I am currently in the process of developing a C++ Qt application that includes a web view functionality. My goal is to display a webpage (which I do not have control over and cannot modify) to the user only after running some JavaScript code on it. Despit ...

javascriptc++qtqwebengineview

How to retrieve client's hostname using Node and Express

How can the client's hostname be retrieved in a Node / Express server? Is there a method similar to req.connection.remoteAddress that can be used to obtain the client's hostname? ...

javascriptnode.jsexpresshostname

Implementing dynamic components in Vuejs by passing props from objects

I have developed a dashboard application that allows users to customize their dashboard by adding widgets in any order. While the functionality is working fine, I am looking to address some technical debt and clean up the code. Let's simplify things ...

javascriptvue.jsvuejs2vue-component

Rendering the Next.js Link tag on the page is displaying as [object Object]

Hey there! I'm currently working on creating breadcrumbs for a webpage and this is what the breadcrumb array looks like: const breadcrumbs = ['Home', "Men's Top", 'Winter Jacket'] Now, in JSX with Next.js, I am att ...

javascriptreactjsnext.js

Looking for a Search Field that clears default text when focused - Compatible with Firefox 3.6?

I have attempted various jQuery and JavaScript solutions found on this page: How to clear text field on focus of text field Surprisingly, all of the solutions work except for FF 3.6. So, I am wondering, What alternative can I use to make this feature com ...

javascriptjquerycssfirefox3.6

implementing a search filter using a search bar with JavaScript, inside a Laravel Blade or HTML file

Our current website is powered by a Laravel blade template, showcasing furniture groups with multiple pieces of furniture in each group. The page is constructed using Laravel's foreach loops for both furniture groups generated by $orderformdata->pg ...

javascriptangularjsjsonlaravel

typescriptWhat is the syntax in TypeScript for creating a prototype of a multidimensional

I'm currently working on implementing additional methods for a 2D array using TypeScript. Adding methods to a 1D array is straightforward, as shown below: interface Array<T> { randomize(); } Array.prototype.randomize = function () { ...

javascriptjquerymultidimensional-arraytypescripttypescript1.4

Can you explain the contrast between onsubmit="submitForm();" and onsubmit="return submitForm();"?

Is it possible that the form below is causing double submissions? <form name="myForm" action="demo_form.asp" onsubmit="submitForm();" method="post"> function submitForm(){ document.myForm.submit(); } I've noticed a bug where sometimes two ...

javascripthtml

Finding the index of a chosen option in Angular

Attempting to retrieve the index of the selected option from a select element using Angular. The Angular (4) and Ionic 3 frameworks are being utilized. The template structure is as follows: <ion-select [(ngModel)]="obj.city"> <ion-option ...

javascriptangulartypescriptionic-frameworkionic3

"Is there a way to transfer a value from one list box to another without needing to refresh the page, by utilizing AJAX,

Is there a way to automatically load Related Course levels in the Course Level Listbox when selecting a Course from the Course list? <script type="text/javascript" src="js/jquery.js"></script> <div>Course:<select name="course_id" id= ...

javascriptphpjqueryhtmlajax

The continuous execution of the npm test task using mocha just won't stop

Here is my npm task labeled as test: "test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'test/**/*.ts'", Running npm run test execut ...

npmmocha.jsnpm-run

The velocity of the Vehicle Spinner increases as the mouse is moved more quickly

Is there a way to increase the rotation speed in the code below? Currently, the movement is calculated as follows: handleMove($event) { if (this.isMoving && this.isDragging) { const positions = { x: $event.pageX || $event.to ...

vue.js

BroccoliMergeTrees function encountered an unexpected data type while attempting to merge trees: TreeMerger (lint) was expecting a Broccoli node, but received an [object

Since switching to Ubuntu 18.04, I've been trying to set up my Ember development environment but have encountered an issue. While my ember project works fine on Windows, I'm getting the error "BroccoliMergeTrees (TreeMerger (lint)): Expected Broc ...

javascriptember.jsframeworksember-dataember-cli

Is it feasible for a form button to perform multiple actions simultaneously?

I am interested in exploring the possibility of having a submit form button perform multiple actions. Currently, I have a custom form that is sent to a Google Spreadsheet using AJAX and I am also utilizing the Blueimp Jquery File Upload plugin. My goal is ...

phpjavascriptajaxforms

Create a default function within a mongoose field

Is there a way to achieve the following in my code: var categorySchema = new Schema({ id: { unique: true, default: function() { //set the last item inserted id + 1 as the current value. } }, name: String }); Can this be done? ...

javascriptnode.jsmongodbexpressmongoose

Having trouble resolving a missing dependency warning with the useEffect React Hook in my Next.js app. Any tips on how to fix this

Currently, I'm facing the following warning: Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array Here is the code snippet from _app.js that seems to be causing this issue: cons ...

javascriptreactjsnext.js