Facebook cubemap video not displaying properly

[tech@quaqua.com]

Hi,

I am using the latest version to display Facebook cubemap video but the cubes are getting combined and the video is not getting displayed properly. Could you please help me in configuring this? I am attaching the sample code here with cubemap video URL (please see "uid": "scene-5"

Code: Select all

{
    "story":
    {
        "uid": "multiple-media-story",
        "name": "Multiple Media Story",
        "slug": "multiple-media-story",
        "description": "This project have multiple scenes and multiple media definition",
        "default": "scene-1",

        "scenes":
        [
            {
                "uid": "scene-1",
                "name": "Image equi scene",
                "slug": "image-equi-scene",
                "description": "This scene has an eqirectangular image media",

                "media":
                {
                    "uid": "media-1",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "https://cdn.forgejs.org/samples/common/panos/01-forest.jpg"
                    }
                }
            },

            {
                "uid": "scene-2",
                "name": "Image cubemap scene",
                "slug": "image-cubemap-scene",
                "description": "This scene has a cubemap image media",

                "media":
                {
                    "uid": "media-2",
                    "type": "image",

                    "source":
                    {
                        "format": "cube",
                        "order": "RLUDFB",
                        "tile": 960,
                        "url": "https://cdn.forgejs.org/samples/common/panos/02-sand-cube.jpg"
                    }
                }
            },

            {
                "uid": "scene-3",
                "name": "Image flat scene",
                "slug": "image-flat-scene",
                "description": "This scene has a flat image media",

                "media":
                {
                    "uid": "media-3",
                    "type": "image",

                    "source":
                    {
                        "format": "flat",
                        "url": "https://cdn.forgejs.org/samples/common/images/Mountain-selfie.jpg"
                    }
                },

                "view":
                {
                    "type": "flat",
                    "options":
                    {
                        "repeatX": false,
                        "repeatY": false
                    }
                }
            },

            {
                "uid": "scene-4",
                "name": "Video equi scene",
                "slug": "video-equi-scene",
                "description": "This scene has an eqirectangular video media",

                "media":
                {
                    "uid": "media-4",
                    "type": "video",

                    "source":
                    {
                        "format": "equi",
                        "levels": [
                            { "url": "https://cdn.forgejs.org/samples/common/videos/omni-highlights/source.02-720p_HD.mp4" },
                            { "url": "https://cdn.forgejs.org/samples/common/videos/omni-highlights/source.03-1080p_HD.mp4" },
                            { "url": "https://cdn.forgejs.org/samples/common/videos/omni-highlights/source.04-1440p_HD.mp4" },
                            { "url": "https://cdn.forgejs.org/samples/common/videos/omni-highlights/source.07-2160p_4K_H264_12M.mp4" }
                        ]
                    },

                    "options":
                    {
                        "autoPlay": true,
                        "loop": true,
                        "volume": 0.5
                    }
                }
            },

            {
                "uid": "scene-5",
                "name": "Video cubemap scene",
                "slug": "video-cubemap-scene",
                "description": "This scene has a cubemap video media",

                "media":
                {
                    "uid": "media-5",
                    "type": "video",

                    "source":
                    {
                        "format": "cube",
                        "order": "RLUDFB",
                  "streaming": "html5",
                        "tile": 0,
                        "url": "https://s3.ap-south-1.amazonaws.com/input-videotest/Cube_Map/10_Amber+Fort_1.mp4"
                    },

                    "options":
                    {
                        "autoPlay": true,
                        "loop": true,
                        "volume": 0.5
                    }
                }
            },

            {
                "uid": "scene-6",
                "name": "Video flat scene",
                "slug": "video-flat-scene",
                "description": "This scene has a flat video media",

                "media":
                {
                    "uid": "media-6",
                    "type": "video",

                    "source":
                    {
                        "format": "flat",
                        "url": "https://cdn.forgejs.org/samples/common/videos/omni-highlights/Omni-Highlights-Reframed-1920x1080.mp4"
                    },

                    "options":
                    {
                        "autoPlay": true,
                        "loop": true,
                        "volume": 0.5
                    }
                },

                "view":
                {
                    "type": "flat"
                }
            },

            {
                "uid": "scene-7",
                "name": "Grid scene",
                "slug": "grid-scene",
                "description": "This scene has a grid media",
                "background": "#202040",

                "media":
                {
                    "uid": "media-7",
                    "type": "grid",

                    "options":
                    {
                        "color": "#7F7FFF"
                    }
                }
            },

            {
                "uid": "scene-8",
                "name": "No media scene",
                "slug": "no-media-scene",
                "description": "This scene without media, just a colored background",
                "background": "#237ABF"
            }
        ]
    },

    "plugins":
    {
        "prefix": "../../plugins/",

        "engines":
        [
            {
                "uid": "org.forgejs.previousnextbuttons",
                "url": "PreviousNextButtons/"
            },

            {
                "uid": "org.forgejs.videocors",
                "url": "VideoCORS/"
            },

            {
                "uid": "org.forgejs.mobilevideoplay",
                "url": "MobileVideoPlay/"
            },

            {
                "uid": "org.forgejs.gyroscopebutton",
                "url": "GyroscopeButton/"
            }
        ],

        "instances":
        [
            {
                "uid": "previousnextbuttons",
                "engine": "org.forgejs.previousnextbuttons"
            },

            {
                "uid": "videocors",
                "engine": "org.forgejs.videocors"
            },

            {
                "uid": "mobilevideoplay",
                "engine": "org.forgejs.mobilevideoplay"
            },

            {
                "uid": "gyrobutton",
                "engine": "org.forgejs.gyroscopebutton",

                "options":
                {
                    "bottom": 10,
                    "left": 10
                }
            }
        ]
    }
}


Thank you.
Regards
Sunny

[rroux]

Hello Sunny,

You have to specify the size of the tiles of your cubemap video.
To do this you have to set the tile parameter in your media configuration.
In your case, your video is 3456 x 2304 so the tile size is 2304 / 2 = 1152

Just replace your media config by this one and it should work :

Code: [Select all] [Expand/Collapse]

1. "media":
2. {
3.     "uid": "media-5",
4.     "type": "video",
5.  
6.     "source":
7.     {
8.         "format": "cube",
9.         "order": "RLUDFB",
10.         "tile": 1152,
11.         "url": "https://s3.ap-south-1.amazonaws.com/input-videotest/Cube_Map/10_Amber+Fort_1.mp4"
12.     },
13.  
14.     "options":
15.     {
16.         "autoPlay": true,
17.         "loop": true,
18.         "volume": 0.5
19.     }
20. }

GeSHi © Codebox Plus Extension

[rroux]

Very nice video by the way! looks cool when it is working

[tech@quaqua.com]

Thank you very much, now it is working fine

[rroux]

You're welcome!

[Evarot]

Very likely if he plays enough. But it is still something you have to keep in mind so you dont disgard the build after a few levels because of the low damage.

