Open xavicolomer opened 6 years ago
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:
git clone https://github.com/videojs/videojs-vr
cd videojs-vr
npm i
./scripts/modules.rollup.config.js
npm run build
I ended up using script-loader of videojs-vr and the function works then.
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
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.
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.
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?
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.
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
@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.
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' ],
},
},
//...
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:
But I get the following error:
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!