CodePen view

Change the orientation of the camera in realtime according to waypoints.

configuration.json

{
    "controllers":
    {
        "enabled": false
    },

    "story":
    {
        "uid": "director-story",
        "name": "Director's Cut Story",
        "slug": "director-story",
        "description": "This is a sample of director's cut applied to a video.",
        "default": "scene-0",

        "scenes":
        [
            {
                "uid": "scene-0",
                "name": "First scene",
                "slug": "first-scene",
                "description": "This is the first and only scene",

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

                    "source":
                    {
                        "format": "equi",
                        "url": "Moto_Desert.mp4"
                    },

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

                "view":
                {
                    "type": "GoPro"
                },

                "director":
                {
                    "animation":
                    {
                        "enabled": true,
                        "delay": 0,
                        "stoppable": false,
                        "loop": false,

                        "tracks": ["director-track-0"]
                    }
                }
            }
        ]
    },

    "director":
    {
        "tracks":
        [
            {
                "uid": "director-track-0",
                "name": "Director's track #0 name",
                "description": "Director's track #0 description",
                "smooth": true,
                "cancelRoll": true,

                "keyframes":
                [
                    { "time": 0,     "data": { "yaw": 100,  "pitch": 0,     "fov": 110 } },
                    { "time": 6500,  "data": { "yaw": 100                              } },
                    { "time": 9300,  "data": { "yaw": 0,                    "fov": 110 } },
                    { "time": 11000, "data": {              "pitch": -20,   "fov": 130 } },
                    { "time": 15000, "data": { "yaw": 0,    "pitch": -60,   "fov": 130 } },
                    { "time": 25000, "data": { "yaw": -180, "pitch": -30,   "fov": 100 } },
                    { "time": 30000, "data": { "yaw": -170, "pitch": -20,   "fov": 70  } },
                    { "time": 33000, "data": { "yaw": -160, "pitch": -30,   "fov": 110 } },
                    { "time": 37500, "data": { "yaw": -140, "pitch": -40,   "fov": 140 } },
                    { "time": 37851, "data": { "yaw": 0,    "pitch": 0,     "fov": 100 } },
                    { "time": 39000, "data": { "yaw": -25,                  "fov": 100 } },
                    { "time": 41000, "data": { "yaw": 85,                   "fov": 120 } },
                    { "time": 44000, "data": { "yaw": 30                               } },
                    { "time": 45000, "data": { "yaw": 0,    "pitch": 0,     "fov": 120 } },
                    { "time": 48000, "data": { "yaw": -5,   "pitch": -40,   "fov": 180 } },
                    { "time": 51200, "data": { "yaw": -15,  "pitch": -85,   "fov": 210 } }

                ]
            }
        ]
    }
}

Back to samples

3rd Jan 2017