Import module using es6

[gaglage]

How can I import this plugin to build a player using es6 with webpack?

Three.js has an easy way: import "three" videojs-panorama??

Thanks

[yanwsh]

working on it right now.

[yanwsh]

Hello, this is supported right now.

Please do

  npm install --save videojs-panorama

Here's the code snippet for example

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

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

    initializePlayer(){
        var { videoInfo } = this.props;
        var videoElement = this.refs.player;
        var isMobile = isMobileOrTablet();

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

        this.player.poster(videoInfo.imageURL);
        this.player.src({src: videoInfo.videoURL, type: "video/mp4" });

        var width = videoElement.offsetWidth;
        var height = videoElement.offsetHeight;
        this.player.width(width), this.player.height(height);
        panorama(this.player, {
            clickToToggle: (!isMobile),
            autoMobileOrientation: true,
            initFov: 100,
            VREnable: isMobile,
            clickAndDrag: true,
            NoticeMessage: (isMobile)? "please drag and drop the video" : "please use your mouse drag and drop the video"
        });

        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 className="video-js vjs-default-skin" crossOrigin="anonymous" controls ref="player">
                        </video>
                    </div>
                </div>
            </div>
        );
    }
}

module.exports = PanoramaVideoPlayer;

[gaglage]

Thanks so much!

[vgrafe]

Hi, when following those instructions, I still get an error from videojs-panorama.common.js : TypeError: player.panorama is not a function. Am I forgetting something?

[scoppato72]

Hi, sorry for ignorance, but the script as indicated by yanwsh how do you use it? Do I have to put it in the .ts file? Please help me