180 videos

[MoiSet]

I am looking for a video player for videos (mp4) and streaming (HLS) of 180 degrees. It has to be compatible for mobile.

Is it possible with videojs-panorama? I have seen that it has support: "180 video support" but I can't find documentation of how it is implemented.

Thanks in advance.

[yanwsh]

sorry, don't have time to add documentation. it can render 180 video like this https://www.youtube.com/watch?v=oeln0dsNzsY check this one, https://github.com/yanwsh/videojs-panorama/releases/tag/v1.0.0-beta

code snippet

        var player = window.player = videojs('videojs-panorama-player', {
            autoplay: true
        });

        player.panorama({
            videoType: "VR1803D",
            clickToToggle: true,
            autoMobileOrientation: true,
            VREnable: true,
            Notice: {
                Enable: true,
                Message: (isMobile())? "please drag and drop the video" : "please use your mouse drag and drop the video"
            }
        });

        window.player = player;

[shubhada-antapurkar]

Hi,

I tried to play the same video with the above code snippet, but the video appears to be cut. On You tube the same video when played, it appears to be 180 degree. Could you please help me? Is there a configuration I have done differently?

Thanks Shubhada

[shubhada-antapurkar]

Hi,

Any comments on the issue?

Thanks Shubhada

[dnavipl]

In my opinion you need to edit videojs-panorama.js file.

Replace this: `function VR1803D(player, options, renderElement) { _classCallCheck(this, VR1803D);

    var _this = _possibleConstructorReturn(this, (VR1803D.__proto__ || Object.getPrototypeOf(VR1803D)).call(this, player, options, renderElement));

    var geometryL = new _three2.default.SphereBufferGeometry(500, 60, 40, 0, Math.PI).toNonIndexed();
    var geometryR = new _three2.default.SphereBufferGeometry(500, 60, 40, 0, Math.PI).toNonIndexed();

    var uvsL = geometryL.attributes.uv.array;
    var normalsL = geometryL.attributes.normal.array;
    for (var i = 0; i < normalsL.length / 3; i++) {
        uvsL[i * 2] = uvsL[i * 2] / 2;
    }

    var uvsR = geometryR.attributes.uv.array;
    var normalsR = geometryR.attributes.normal.array;
    for (var _i = 0; _i < normalsR.length / 3; _i++) {
        uvsR[_i * 2] = uvsR[_i * 2] / 2 + 0.5;
    }

    geometryL.scale(-1, 1, 1);
    geometryR.scale(-1, 1, 1);

    _this._meshL = new _three2.default.Mesh(geometryL, new _three2.default.MeshBasicMaterial({ map: _this._texture }));

    _this._meshR = new _three2.default.Mesh(geometryR, new _three2.default.MeshBasicMaterial({ map: _this._texture }));
    _this._meshR.position.set(1000, 0, 0);

    _this._scene.add(_this._meshL);
    return _this;
}

`

To this:

`function VR1803D(player, options, renderElement) { _classCallCheck(this, VR1803D);

    var _this = _possibleConstructorReturn(this, (VR1803D.__proto__ || Object.getPrototypeOf(VR1803D)).call(this, player, options, renderElement));

    var geometryL = new _three2.default.SphereBufferGeometry(500, 60, 40, 0, Math.PI).toNonIndexed();
    var geometryR = new _three2.default.SphereBufferGeometry(500, 60, 40, 0, Math.PI).toNonIndexed();

    var uvsL = geometryL.attributes.uv.array;
    var normalsL = geometryL.attributes.normal.array;
    for (var i = 0; i < normalsL.length / 3; i++) {
        uvsL[i * 2] = uvsL[i * 2];
    }

    var uvsR = geometryR.attributes.uv.array;
    var normalsR = geometryR.attributes.normal.array;
    for (var _i = 0; _i < normalsR.length / 3; _i++) {
        uvsR[_i * 2] = uvsR[_i * 2] + 0.01; 
    }

    geometryL.scale(-1, 1, 1);
    geometryR.scale(-1, 1, 1);

    _this._meshL = new _three2.default.Mesh(geometryL, new _three2.default.MeshBasicMaterial({ map: _this._texture }));

    _this._meshR = new _three2.default.Mesh(geometryR, new _three2.default.MeshBasicMaterial({ map: _this._texture }));
    _this._meshR.position.set(1000, 0, 0);

    _this._scene.add(_this._meshL);
    return _this;
}

`

[krzimmer]

The code update fixed the issue for me.