CodePen view

A simple example showing how to navigate through scenes with different kind of media.

configuration.json

{
    "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": "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": "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": "Mountain-selfie.jpg"
                    }
                },

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

            {
                "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": "omni-highlights-720p_HD.mp4" },
                            { "url": "omni-highlights-1080p_HD.mp4" },
                            { "url": "omni-highlights-1440p_HD.mp4" },
                            { "url": "omni-highlights-2160p_4K.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",
                        "tile": 960,
                        "url": "omni_highlights.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": "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/"
            }
        ],

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

Back to samples

21st Apr 2017