Components Video 360
Animate CC component that allows viewing videos in 3D space. The component utilizes the API from the standalone video 360 player, see https://wiki3.tremorvideo.com/display/eng/Video+360+for+JavaScript#Video360forJavaScript-vr
Using the component (End-User)
When the add starts, the player will load. This may not be immediately visible if the component was nested inside another element on the canvas that is not initally visible (i.e. Slate). The video will automatically play when the component becomes visible if the autoplay parameter was true, otherwise the user will click on the component where prompted. Once the video is showing in the player, the user can use their cursor to drag on the component, effectively panning around in 3D space. Clicking on the player will display the play/pause button. The video will automatically pause when the component hides.
Designing with the component
Placement
First, ensure the Components panel is showing in Animate CC (Winow > Components). Expand the Blink Components folder and drag the Video 360 component onto the canvas. The component can be repositioned by clicking and dragging.
Instance Name
To adjust the properties of the component, ensure the desired Video 360 component is selected and open the Properties panel (Window > Properties). Each component can be designated a unique instance name if preferred. Otherwise, the instance name will be the component name + the number of components already placed (e.g. video-360-0).
Size and Position
The position and size can be manipulated on the canvas or through the properties pane. Note: clicking the link icon next to the size properties will lock the aspect ratio. It is advised to choose an aspect ratio corresponding to the aspect ratio of the video.
Parameters
Under the Component Parameters heading are a list of configurable parameters for the select component. The properties starting coords, camera position, sphere geometry, field of view angle, and allow vr mode are all parameters of the video 360 api as defined in the documentation. See https://wiki3.tremorvideo.com/display/eng/Video+360+for+JavaScript#Video360forJavaScript-vr for more details. The remaining parameters of the component are explained below.
Keys
Their are two key fields, one for the video-360 key and one for the fallback-video key. These keys should match keys in the toml file that correspond to the desired video. The component will choose an appropriate video format. The video-360 key is the designation given to the primary video that will be displayed in 360 degrees. The fallback-video key is the designation given to the alternate standard (non-360) video that will play in a standard video player if webgl is not supported on the user’s browser.
Autoplay
The auto play parameter controls whether the video will automatically play when the component becomes visible. It is defaulted to false. When false, the user viewing the ad must manually start the video.
Development
The component uses the video 360 API developed here: https://trex-git.tremorvideodsp.com/af/video-360 Details for using the API are here: https://wiki3.tremorvideo.com/display/eng/Video+360+for+JavaScript#Video360forJavaScript-vr
Component Methods
getCreateString defines the root element to be a 'div’, which is assigned to this._$this. A nested ‘div’ is given a class corresponding to the component id, which is passed to the video 360 api for building the player. The attach method handles building the video player. The update method is fired every frame to apply property changes to the root element and dispatches a resize event when the screen resolution changes to fix the component size.
Helper Methods
The component utilizes a couple helper methods from a utility file. The _handleComponentUpdate method invoked during updates helps keep the component scaled appropriately. The setPlayPause method invoked during updates helps automate certain video playback functionality.
Video File Format
There is a helper function that processes the outputs.json file corresponding to the key entered for either the 360 video or fallback video. It tests different file formats until it find one that exists in the outputs.json and is supported by the current browser running the ad. This function is very similar to one in blink. It uses the isSupported utility function from the vpaid-ad npm module to test the file format.
Media Progress Tracking
Both the 360 video and fallback video will emit media progress events for every quartile the video plays. This is coded very similarly to the tracking present in blink for the TrmrPlayer class. It uses functions from the vpaid-ad and tiny-emitter npm modules.