Components Secondary Video
Animate CC component that plays standard videos. This is a componetized version of the Blink Secondary Video.
Using the component (End-User)
This will appear as a standard html element video player. Default video player controls can be enabled or disabled to allow for custom controls.
Designing with the component
Placement
First, ensure the Components panel is showing in Animate CC (Window > Components). Expand the Blink Components folder and drag the Secondary Video component onto the canvas. Multiple can be placed on the same canvas. The components can be repositioned by clicking and dragging.
Instance Name
To adjust the properties of the component, ensure the desired Photo360 component is selected and open the Properties panel (Window > Properties). Each component can be designated a unique instance name if preferred. This is recommended if the player will be manipulated in the Animate CC action scripts to change video source, etc… Otherwise, the default instance name will be the component name + the number of components already placed (e.g. secondary-video-container-0, secondary-video-container-1, secondary-video-container-2).
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 (typically 16:9).
Parameters
Under the Component Parameters heading are a list of configurable parameters for the selected component.
Player Index
The player-index is the index corresponding to the list of players instantiated in Blink. Give each video component a unique index (typically starting with 0). The index must be a number.
Key
The key parameter will be the inital video source that loads. It should exactly match a video name in the toml file. This allows the player to retreive the video json object.
Video Name
The video-name will the be name used when firing quartile media progress tracking events.
Autoplay
The auto play parameter controls whether the video will be automatically played when the component becomes visible. It is defaulted to true. If false, the user viewing the ad must manually start the video.
Show Controls
The show controls parameter determines if the default html video player controls will be visible. It is defaulted to true. It should be disabled if custom controls are designed in Animate CC. Note: if both auto play and show controls are disabled, video playback must be controlled via action scripts.
Custom Scripts
Custom scripts can be written in Animate CC to manipulate the player, just as was previously possible with the Blink secondary video.
Target Component
Targeting the player in the code will be a little different with the component than the blink player . The code must listen for an attached event to fire on the dom_overlay_container element. If the id of the object attached to the event matches the instance name given to the component, the component has successfully loaded and is ready to be manipulated. Target the component player like this:
var component = this.UniqueInstanceName._element
var player = component.player
Ensure that the component is given a unique instance name.
Control Play ,Pause, etc…
Methods of the player’s html video node, like play and pause, control playback.
player.node.play()
player.node.pause()
You can access the full functionality of HTML5 Video and this MDN article. For all available methods and functionality of the player, see the documentation for Blink Secondary Player.
Changing the Source
The use method can change the video source of the player. It takes two arguments. The first is the video key. It should exactly match a video name in the toml file. The second is the video name that will be used when firing quartile media progress tracking events. Example:
player.use('slate-vid-2', 'SecondaryVid2')
Example
This example gives the end user the ability to change the source of the video by clicking custom buttons in the creative. Clicking on one of the three buttons will play the corresponding slate-video. In this example, the component instance name was VideoComponent.
var overlay = $($b.animContainer.children.dom_overlay_container)
overlay.on('attached', function (ev, obj) {
if (obj.id === 'VideoComponent') {
var player = this.VideoComponent._element.player
var button1 = this.VidButton1
var button2 = this.VidButton2
var button3 = this.VidButton3
button1.on('click', function () {
player.use('slate-vid-1', 'SecondaryVid1')
player.node.play()
})
button2.on('click', function () {
player.use('slate-vid-2', 'SecondaryVid2')
player.node.play()
})
button3.on('click', function () {
player.use('slate-vid-3', 'SecondaryVid3')
player.node.play()
})
}
}.bind(this))
Note: Ensure context is bound to the callback by using .bind(this) as shown.
Development
The component is built primarily around the player returned by the getPlayer method in Blink, which instantiates a player of the TrmrPlayer class.
Component Methods
getCreateString defines the root element to be a 'div’, which is assigned to this._$this. Nested within this is another div with the video-container class. The actual html video element of the video player is nested inside this div when created.
The update method is fired every frame to apply property changes to the root element and invoke other custom functions.
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.