ForgeJS allows you to display different media types and formats on the background of your scenes. Here is a tutorial about the video media declarations you can add in your json configuration for now.

Video

A video media can have different formats. By format we mean that pixels are not organized the same way from one format to another for the same video resource! ForgeJS handles two formats at the moment which are equirectangular and cubemap videos. We can also have diffrent video qualities for a same video.

Video equi

Here is what an equirectangular video resource looks like:

Mono quality

{
    "story":
    {
        "uid": "media-story",

        "scenes":
        [
            {
                "uid": "scene-video-equi-mono-quality",

                "media":
                {
                    "uid": "media-video-equi-mono-quality",
                    "type": "video",

                    "source":
                    {
                        "format": "equi",
                        "url": "video-equi.mp4"
                    },

                    "options":
                    {
                        "autoPlay": true,
                        "loop": true,
                        "volume": 1
                    }
                }
            }
        ]
    }
}
  • uid - The unique identifier of the media.
  • type - The type of the media (video).
  • source.format - The source format (equi).
  • source.url - The equi video url.
  • options.autoPlay - Does the video auto play at start? (Does not work on mobile)
  • options.loop - Does the video loop?
  • options.volume - The video volume you want to set.

Multi quality

ForgeJS has two ways to handle multi quality:

  • The first one is to use several video files that represent different qualities of the same video. ForgeJS will try to play the best quality according to the user bandwidth.
  • The second one is to use a mpeg-dash video.
Multiple video files
{
    "story":
    {
        "uid": "media-story",

        "scenes":
        [
            {
                "uid": "scene-video-equi-multi-quality",

                "media":
                {
                    "uid": "media-video-equi-multi-quality",
                    "type": "video",

                    "source":
                    {
                        "format": "equi",
                        "levels":
                        [
                            {"url": "video-equi-quality-0.mp4"},
                            {"url": "video-equi-quality-1.mp4"},
                            {"url": "video-equi-quality-2.mp4"},
                            {"url": "video-equi-quality-3.mp4"}
                        ]
                    }

                    "options":
                    {
                        "autoPlay": true,
                        "loop": true,
                        "volume": 1
                    }
                }
            }
        ]
    }
}
  • uid - The unique identifier of the media.
  • type - The type of the media (video).
  • source.format - The source format (equi).
  • source.levels - An array of objects containing the urls of the different quality levels.
  • options.autoPlay - Does the video auto play at start? (Does not work on mobile)
  • options.loop - Does the video loop?
  • options.volume - The video volume you want to set.
MPEG-DASH video
{
    "story":
    {
        "uid": "media-story",

        "scenes":
        [
            {
                "uid": "scene-video-equi-mpeg-dash",

                "media":
                {
                    "uid": "media-video-equi-mpeg-dash",
                    "type": "video",

                    "source":
                    {
                        "format": "equi",
                        "streaming": "dash",
                        "url": "video-dash.mpd"
                    },

                    "options":
                    {
                        "autoPlay": true,
                        "loop": true,
                        "volume": 1
                    }
                }
            }
        ]
    }
}
  • uid - The unique identifier of the media.
  • type - The type of the media (video).
  • source.format - The source format (equi).
  • source.streaming - The streaming technique used for this video (dash).
  • source.url - The url of the mpeg-dash media presentation description (MPD) file.
  • options.autoPlay - Does the video auto play at start? (Does not work on mobile)
  • options.loop - Does the video loop?
  • options.volume - The video volume you want to set.

Video cubemap

Here is what looks like a cubemap video resource:

Mono quality

{
    "story":
    {
        "uid": "media-story",

        "scenes":
        [
            {
                "uid": "scene-video-cubemap-mono-quality",

                "media":
                {
                    "uid": "media-video-cubemap-mono-quality",
                    "type": "video",

                    "source":
                    {
                        "format": "cube",
                        "order": "RLUDFB",
                        "tile": 960,
                        "url": "video-cubemap.mp4"
                    }
                }
            }
        ]
    }
}
  • uid - The unique identifier of the media.
  • type - The type of the media (video).
  • source.format - The source format (equi).
  • source.url - The equi video url.
  • options.autoPlay - Does the video auto play at start? (Does not work on mobile)
  • options.loop - Does the video loop?
  • options.volume - The video volume you want to set.

Multi quality

You can use the same multi quality features and syntax for a cubemap video.

31st Oct 2017