Uncaught TypeError: player.vr is not a function

[xavicolomer]

Hi there!

First, congratulations and great work.

I have a problem trying to use this plugin, and I think webpack might be an ingredient to the problem.

Here is how I use the libraries:

import videojs from 'video.js';
import 'videojs-vr';

const player = videojs('videoplayer', options, () => {
          if (media.isPanorama) {
            player.vr();
          }
        });
player.src(media.url);

But I get the following error:

index.js:69 Uncaught TypeError: player.vr is not a function
    at Player.video_js__WEBPACK_IMPORTED_MODULE_1___default (index.js:69)
    at Player.eval (video.cjs.js:3611)
    at Array.forEach (<anonymous>)
    at Player.eval (video.cjs.js:3610)
    at bound (video.cjs.js:2070)

The plugin code its there, I'd say in the correct order, but I can't make it work.

P.S: I also tried calling this function before creating the player

videojs.registerPlugin('vr', require('videojs-vr'));

Any ideas?

Thanks!

[brandonocasey]

What version of video.js are you using? If you are using 7 could you try if with 6? What is the output of videojs.getPlugins? Its also possible that three should not be marked as external here https://github.com/videojs/videojs-vr/blob/master/scripts/modules.rollup.config.js#L32. If you want to give building the project a after removing all the externals from that file here is what you do:

1. git clone https://github.com/videojs/videojs-vr
2. cd videojs-vr
3. npm i
4. make edits to ./scripts/modules.rollup.config.js
5. npm run build
6. then link this directory to the other project you are working on so this version will be used.

[AndrewStobie]

I ended up using script-loader of videojs-vr and the function works then.

[alexlopez-natgeo]

Same result with 7.0.3 and 6.12

import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-vr'

const player = videojs('videoPlayer');
player.vr();

log Uncaught TypeError: player.vr is not a function,

is this plugin not intended to use from npm?

plus @BrandonOCasey this https://github.com/videojs/videojs-vr/blob/master/scripts/modules.rollup.config.js#L32. doesn't exist anymore

[Yumius]

Hi i've got the same problem.. Have them both installed with NPM and getting errors with:

import videojs from 'video.js/dist/video.min.js'; import 'videojs-vr/dist/videojs-vr.min.js';

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

player.vr();

main_41166189.js:228 Uncaught TypeError: s(...)(...).vr is not a function at Object.init (main_41166189.js:228) at r.fire (main_41166189.js:228) at r.loadEvents (main_41166189.js:228) at HTMLDocument. (main_41166189.js:175) at i (jquery-1.12.4.min.js:2) at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2) at Function.ready (jquery-1.12.4.min.js:2) at HTMLDocument.K (jquery-1.12.4.min.js:2)

[andrew-dixon]

Has anyone managed to solve using videojs-vr with Webpack? I've tried the script-loader suggestion by @AndrewStobie above but it didn't work, it just caused JS errors in the console. Thanks.

[EtherLoda]

Has anyone managed to solve using videojs-vr with Webpack? I've tried the script-loader suggestion by @AndrewStobie above but it didn't work, it just caused JS errors in the console. Thanks.

Hi Have you manage to solve the problem?

[mbIkola]

Has anyone managed to solve using videojs-vr with Webpack? I've tried the script-loader suggestion by AndrewStobie above but it didn't work, it just caused JS errors in the console. Thanks.

Import with original/not-modified webpack config from create-react-app (using side-effects), this is works for me:

import React, {useEffect, useRef, useState} from 'react';

import 'three';

import videojs from 'video.js';
import 'videojs-vr/dist/videojs-vr';

import 'videojs-vr/dist/videojs-vr.css';
import 'video.js/dist/video-js.css';

export const  VideoPlayer = ({...videojsOptions}) => {
   const [player, setPlayer] = useState(null);
    const videoNode = useRef();
    const container = useRef();

    useEffect(() => {
        if (! videoNode || ! videoNode.current) {
            return;
        }
        let _player = videojs(videoNode.current, videojsOptions, () => {});
        setPlayer(_player);
        return () => {
            if (_player) {
                _player.dispose();
            }
        }
    });

    return (
        <div>
            <div data-vjs-player ref={ container }>
                <video  ref={ videoNode } autoPlay loop muted playsInline preload="auto"  className="video-js vjs-fluid"></video>
            </div>
        </div>
    )
}

if problem still persist - check your dependencies and run npm dedupe if there is more than one videojs instance.

[naren0021]

I ended up using script-loader of videojs-vr and the function works then.

@andrew-dixon can you please let me know the version, How you made it work

[andrew-dixon]

@naren0021 That quote was from @AndrewStobie not me 😄

I ended up giving up with videojs for VR, simply couldn't get it to work and used Delight VR (https://delight-vr.com/video-player-module/) instead. Not open-source, but free for my use case.

[marcellosurdi]

Try this, worked for me in WebPack 5

video.js ^7.11.4 videojs-vr ^1.7.1

// video.js module
import 'video.js/dist/video-js.min.css';
import videojs from 'video.js/dist/video.min.js';
export { videojs }

// video-vr.js module
import videojs from 'video.js';
import 'videojs-vr/dist/videojs-vr.css';
import 'videojs-vr/dist/videojs-vr.min.js';

// My WebPack config
//...
  entry: {
    main: paths.src + '/main.js',
    videojs: {
      import: paths.src + '/video.js',
      dependOn: [ 'main' ],
    },
    videojs_vr: {
      import: paths.src + '/video-vr.js',
      dependOn: [ 'videojs' ],
    },
  },
//...