error: 'player.panorama is not a function'

[sachinkaria]

I am receiving the error 'player.panorama is not a function' when using video.js and videojs-panorama with React.

My code is below:

import {Component, PropTypes} from 'react'
import videojs from 'video.js';
import panorama from 'videojs-panorama';

export default class VideoPlayer extends Component {
    constructor(props) {
        super(props);
        this.displayName = 'VideoPlayer';
        this.player = null;
    }

    initializePlayer(){
        var videoElement = this.refs.player;
        var isMobile = false;

        this.player = videojs(videoElement, {},  () => {
            window.addEventListener("resize", () => {
                let canvas = this.player.getChild('Canvas');
                if(canvas) canvas.handleResize();
            });
        });

        this.player.src({src: '/path/to/video/file', type: "video/mp4" });

        let width = videoElement.offsetWidth;
        let height = videoElement.offsetHeight;
        this.player.width(width), this.player.height(height);

        panorama(this.player, {
            clickToToggle: (!isMobile),
            autoMobileOrientation: true,
            initFov: 100,
            VREnable: isMobile,
            clickAndDrag: true
        });

        // this.player.on("VRModeOn", function(){
        //     this.player.controlBar.fullscreenToggle.trigger("tap");
        // });
    }

    componentDidMount(){
        this.initializePlayer();
    }

    render(){
        return (
            <div className="panroama__video__player">
                <div className="panroama__video__player__wrapper">
                    <div className="panroama__video__player__container">
                        <video height="200px" width="600px" className="video-js vjs-default-skin" crossOrigin="anonymous" controls ref="player">
                        </video>
                    </div>
                </div>
            </div>
        );
    }
}

[yanwsh]

I couldn't find any issue, could you tell me which video.js do you use, video.js 6?

[allan-walker]

Hi, I'm getting the same error in a react project (ES6).

I was using video.js v6, but I tried with v5.8: npm install video.js@5.8.0 and it didn't seem to change anything.

I installed this by running npm install videojs-panorama

I am not an expert at ES6 - any idea why this code (from videojs-panorama.common.js) doesn't accept panorama is a function?

var plugin_es6 = function (player, options) { return player.panorama(options); }; module.exports = plugin_es6;

I'm stuck - if there is any help you can give me to point me as to what you should expect to be happening I would love to look into this further

[vuongtaquoc]

Hi, I'm getting the same error in a react project (ES6).

I was using video.js v6, but I tried with v5.8: npm install video.js@5.8.0 and it didn't seem to change anything.

I installed this by running npm install videojs-panorama

I am not an expert at ES6 - any idea why this code (from videojs-panorama.common.js) doesn't accept panorama is a function?

var plugin_es6 = function (player, options) { return player.panorama(options); }; module.exports = plugin_es6;

I'm stuck - if there is any help you can give me to point me as to what you should expect to be happening >I would love to look into this further

I'm getting the same error in a angular 2 project (typescript). Please help me @yanwsh

[yanwsh]

Thanks all, this problem should be solved, please remove node_modules folder and npm install again.

[yanwsh]

I tested without problem, but let me know if you have any issues.

[allan-walker]

Thanks @yanwsh !

Will this work with the latest video.js version? Or will we need to use 5.8?

I'm just about to test it now, will let you know how it goes

[yanwsh]

It didn't matter. Should work on version. Let me know if it doesn't work.

[allan-walker]

Fantastic! This works.

Thanks so much

[Lenndev]

Hi, i just installed the latest version via npm and copied the code @sachinkaria posted... to use as a test to see if it works, but i get the following error: TypeError: player.panorama is not a function at plugin_es6 (videojs-panorama.common.js:1312)

what could it be? Using it in a cordova/vuejs combo using es6.

logged the player object, indeed no property panorama defined...

[yanwsh]

Please go to node_modules/videojs-panorama/ and check package.json file, does peerDependencies exist in this file?

[Lenndev]

Hi! for some reason it kinda worked after uninstalling and reinstalling the plugin... but now i get a black screen and sound only because there is cross-origin data in the video... i get the following error: THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.

[Lenndev]

as an answer to your question... yes peerDependencies is in the package.json

[yanwsh]

Duplicate of #123

[Lenndev]

@yanwsh oke... what is the cause of the

[yanwsh]

No, video tag hide intentionally. The mean problem is cross domain. Make sure remote video has cross domain support.

[Lenndev]

oke... i understand... but i took the example video from a different issue... and i still get black screen and sound only and the following warning

WebGL: INVALID_VALUE: texImage2D: no video
texImage2D @ three.js:19631
uploadTexture @ three.js:18532
setTexture2D @ three.js:18182
setTexture2D @ three.js:22775
setValueT1 @ three.js:4507
WebGLUniforms.upload @ three.js:4826
setProgram @ three.js:22170
WebGLRenderer.renderBufferDirect @ three.js:20964
renderObject @ three.js:21722
renderObjects @ three.js:21695
WebGLRenderer.render @ three.js:21459
render @ videojs-panorama.common.js:702
animate @ videojs-panorama.common.js:520
3:1337/#/video-360/video:1 [.Offscreen-For-WebGL-0x7f8fd8350000]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

[yanwsh]

If you just want to test, download video and put it into your site folder, it should work.

[Lenndev]

so i did. i put it in local assets folder but the result is the same :/

[yanwsh]

Email me your code, let me figure it out. yanwsh@gmail.com

[Lenndev]

sorry but i cant send my complete source... videoplayer component (vue.js)

    <transition name="dialog">
        <div class="videoplayerdialog-holder" v-show="getShowPlayer">
            <div class="videoplayerdialog-background" @click="quitVideo"></div>
            <div class="videoplayerdialog dialog">
                <div class="videoplayerdialog-content">
                    <div class="closebtn" @click="quitVideo">
                        <i class="fa fa-times"></i>
                    </div>
                    <video height="200px" width="600px" class="video-js vjs-default-skin" crossorigin="anonymous" controls id="vidplayer">
                    </video>

                </div>
                <div class="videoplayerdialog-buttonbox">
                    <div class="videoplayerdialog-btn"
                         @click="onPlayBtn">{{playbtnlabel}}
                    </div>
                    <div class="videoplayerdialog-btn" v-if="getPlayVideo == true"
                         @click="onStopBtn">
                        stop
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>

    import { mapGetters } from 'vuex';
    import three from 'three';
    import videojs from 'video.js';
    import panorama from 'videojs-panorama';

    export default {
        name: 'videoplayer',
        data() {
            return {
                player: null
            };
        },
        computed: {
            ...mapGetters('videoplayer', ['getShowPlayer', 'getPlayVideo', 'getSrc']),
            video() {
                return document.getElementById('vidplayer');
            },
            playbtnlabel() {
                return this.getPlayVideo == true ? 'pause' : 'play';
            },
        },
        mounted() {
            this.initializePlayer();
        },
        methods: {
            initializePlayer() {
                let videoElement = this.video;
                this.player = videojs(videoElement, {}, (el) => {
                    window.addEventListener("resize", () => {
                        console.log("onresize");
                        let canvas = this.player.getChild('Canvas');
                        if (canvas) canvas.handleResize();
                    });
                });

//                this.player.src({ src: 'https://player.vimeo.com/external/218619461.hd.mp4?s=40287f720c78314a86f55dd8554a6dc4c323eb72&profile_id=119', type: "video/mp4" });
                this.player.src({ src: '/assets/video/test360.mp4', type: "video/mp4" });
                this.video.setAttribute('crossorigin', 'anonymous');
                this.video.load();

                this.player.width(videoElement.offsetWidth);
                this.player.height(videoElement.offsetHeight);

                if(this.player && this.player.panorama && typeof this.player.panorama == 'function'){
                    console.log("panorama is existing property method within video ");
                    panorama(this.player, {
                        PanoramaThumbnail: true, //enable panorama thumbnail
                        clickToToggle:false,
                        autoMobileOrientation: true,
                        initFov: 100,
                        VREnable: true,
                        clickAndDrag: true,
                    });

                }

                 this.player.on("VRModeOn", function(){
                     this.player.controlBar.fullscreenToggle.trigger("tap");
                 });
            },
            quitVideo() {
                this.video.pause();
                this.$store.dispatch('videoplayer/quitPlayer');
            },
            onPlayBtn() {
                if (this.getPlayVideo) {
                    this.$store.commit('videoplayer/pauseVideo');
                    this.video.pause();

                } else {
                    this.$store.commit("videoplayer/playVideo");
                    this.video.play();
                }
            },
            onStopBtn() {
                this.video.pause();
                this.$store.commit('videoplayer/stopVideo');
            },

        },
    }
</script>

index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
     <meta http-equiv="Content-Security-Policy" content="img-src * blob: android-webview-video-poster: cdvphotolibrary:  'self' data: ws: wss://*; default-src * blob: 'self' gap: wss: ws: data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * http: https: ws: wss://*; media-src *;">

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <link rel="stylesheet" href="assets/css/style.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <div id="app">
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script src="assets/js/bundle.js" charset="utf-8"></script>
  </body>
</html>

config.xml

<widget id="com.app.my" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>My APP</name>
    <description>
    </description>

    <content src="index.html" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="SplashScreenDelay" value="10000" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="FadeSplashScreenDuration" value="500" />
    <icon src="icon.png" />
    <splash src="splash.png" />
    <platform name="android">
        <icon density="ldpi" src="res/icons/android/icon-36-ldpi.png" />
        <icon density="mdpi" src="res/icons/android/icon-48-mdpi.png" />
        <icon density="hdpi" src="res/icons/android/icon-72-hdpi.png" />
        <icon density="xhdpi" src="res/icons/android/icon-96-xhdpi.png" />
        <icon density="xxhdpi" src="res/icons/android/icon-144-xxhdpi.png" />
        <icon density="xxxhdpi" src="res/icons/android/icon-192-xxxhdpi.png" />
        <splash density="land-hdpi" src="res/screens/android/screen-hdpi-landscape.png" />
        <splash density="land-ldpi" src="res/screens/android/screen-ldpi-landscape.png" />
        <splash density="land-mdpi" src="res/screens/android/screen-mdpi-landscape.png" />
        <splash density="land-xhdpi" src="res/screens/android/screen-xhdpi-landscape.png" />
        <splash density="port-hdpi" src="res/screens/android/screen-hdpi-portrait.png" />
        <splash density="port-ldpi" src="res/screens/android/screen-ldpi-portrait.png" />
        <splash density="port-mdpi" src="res/screens/android/screen-mdpi-portrait.png" />
        <splash density="port-xhdpi" src="res/screens/android/screen-xhdpi-portrait.png" />
    </platform>
    <platform name="ios">
        <icon height="60" src="res/icons/ios/icon-60.png" width="60" />
        <icon height="120" src="res/icons/ios/icon-60-2x.png" width="120" />
        <icon height="180" src="res/icons/ios/icon-60-3x.png" width="180" />
        <icon height="76" src="res/icons/ios/icon-76.png" width="76" />
        <icon height="152" src="res/icons/ios/icon-76-2x.png" width="152" />
        <icon height="40" src="res/icons/ios/icon-40.png" width="40" />
        <icon height="80" src="res/icons/ios/icon-40-2x.png" width="80" />
        <icon height="57" src="res/icons/ios/icon-57.png" width="57" />
        <icon height="114" src="res/icons/ios/icon-57-2x.png" width="114" />
        <icon height="72" src="res/icons/ios/icon-72.png" width="72" />
        <icon height="144" src="res/icons/ios/icon-72-2x.png" width="144" />
        <icon height="29" src="res/icons/ios/icon-small.png" width="29" />
        <icon height="58" src="res/icons/ios/icon-small-2x.png" width="58" />
        <icon height="50" src="res/icons/ios/icon-50.png" width="50" />
        <icon height="100" src="res/icons/ios/icon-50-2x.png" width="100" />
        <splash height="480" src="res/screens/ios/screen-iphone-portrait.png" width="320" />
        <splash height="960" src="res/screens/ios/screen-iphone-portrait-2x.png" width="640" />
        <splash height="1024" src="res/screens/ios/screen-ipad-portrait.png" width="768" />
        <splash height="2048" src="res/screens/ios/screen-ipad-portrait-2x.png" width="1536" />
        <splash height="768" src="res/screens/ios/screen-ipad-landscape.png" width="1024" />
        <splash height="1536" src="res/screens/ios/screen-ipad-landscape-2x.png" width="2048" />
        <splash height="1136" src="res/screens/ios/screen-iphone-568h-2x.png" width="640" />
        <splash height="1334" src="res/screens/ios/screen-iphone-portrait-667h.png" width="750" />
        <splash height="2208" src="res/screens/ios/screen-iphone-portrait-736h.png" width="1242" />
        <splash height="1242" src="res/screens/ios/screen-iphone-landscape-736h.png" width="2208" />
    </platform>
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-plugin-battery-status" spec="~1.1.1" />
    <plugin name="cordova-plugin-camera" spec="~2.1.1" />
    <plugin name="cordova-plugin-console" spec="~1.0.2" />
    <plugin name="cordova-plugin-contacts" spec="~2.0.1" />
    <plugin name="cordova-plugin-device" spec="~1.1.1" />
    <plugin name="cordova-plugin-device-motion" spec="~1.2.0" />
    <plugin name="cordova-plugin-device-orientation" spec="~1.0.2" />
    <plugin name="cordova-plugin-dialogs" spec="~1.2.0" />
    <plugin name="cordova-plugin-geolocation" spec="~2.1.0" />
    <plugin name="cordova-plugin-globalization" spec="~1.0.3" />
    <plugin name="cordova-plugin-inappbrowser" spec="~1.3.0" />
    <plugin name="cordova-plugin-file" spec="~4.1.1" />
    <plugin name="cordova-plugin-file-transfer" spec="^1.6.3" />
    <plugin name="cordova-plugin-media" spec="~2.2.0" />
    <plugin name="cordova-plugin-media-capture" spec="~1.2.0" e/>
    <plugin name="cordova-plugin-network-information" spec="~1.2.0" />
    <plugin name="cordova-plugin-splashscreen" spec="~3.2.1" />
    <plugin name="cordova-plugin-statusbar" spec="~2.1.2" />
    <plugin name="cordova-plugin-vibration" spec="~2.1.0" />
    <plugin name="cordova-plugin-whitelist" spec="~1.2.1" />
    <engine name="android" spec="~6.2.3" />
</widget>

[ShawnOakley]

Getting this error as well when running in storybook. It appears that the video.js plugin registry process used for this library has been deprecated so 'panorama' isn't being registered on the player.

[ShawnOakley]

For those running into this issue, it seems as if the panorama plugin is being registered on a separate import of video.js. (One which the react app does not appear to know about or have access to). I fixed this by taking videojs-panorama.common.js from the dist folder, putting it in my react app, and importing it locally. That way it is registering on the same videojs prototype that my app is using. Since it seems as if this project isn't being actively maintained, it isn't as if you'll be foregoing any code updates by doing this, so there's less downside than this solution would typically entail.

[iubhatt17]

@yanwsh I am also facing this error in angular 7.I have tried to remove node_modules and then again done npm i but didn't get success.Kindly suggest some suggestions.Thank you.

[qinjiawang]

I am also facing this error ,i npm install again,it does not work

[willmontiel]

Hey man @yanwsh I'm having the same issue "player.panorama is not a function", do you know how to solve this? Or this plugin will not work with videojs 7. Thanks!. I'm using react!

[vnext-nguyen-quyen]

Hi @yanwsh Tks for great library play video 360.

I'm having issue that "player.panorama is not a function" on videojs 7. Is that plugin not support on videojs 7?

Thanks & BRS

[ssc197]

Hi @yanwsh, Which version of videojs does it support, because I am using the latest version of videojs, it's giving me an error: player.panorama is not a function