Video

From Frontal Wiki

Jump to: navigation, search

Contents

Introduction to the video tag

The "video" tag is used to add videos to your Frontal definition. The basic format of this tag is: 

<video src="" />

where src is set to the URL of the video to show. For example: 

<video src="http://www.frontalcode.com/assets/video/video_1.flv" />

Implementation

"video" is a visual element implemented by the ContainerVideo class which extends the Container class described for the "div" tag.

Properties

In addition to that DocumentElement class's properties, ContainerVideo adds:

  • video: This is an instance of the Flash FLVPlayback class. It is this that Frontal uses for video display.

Methods

While these methods aren't particular to the video tag, their behavior is unique:

  • getDeepLinkValue: This method will return a cue point object given a cue point time or name. It takes one parameter:
  • * index: The time or the name of the cue point to find.
  • getDeepLinkIndex: This does the opposite of getDeepLinkValue, given a cue point, it returns a name if one exists otherwise a time. It takes one parameter:
  • * value: The cue point object. (An Object with at least a member named "time" but also perhaps "name" and "title.")
  • processDeepLink: This will cause the video to jump to a given cue point. The method also ensures that any interaction associated with the given cue point is called. It takes one parameter:
  • * cuePoint: The cue point object. (An Object with at least a member named "time" but also perhaps "name" and "title.")

Attributes

As for attributes, any attribute that starts with "cuePoint" or "oncuePoint" (case insensitively) is particular to the video tag. It is with these attributes that we create cue points in and deep links into a video. Related is the "onAnyCuePoint" attribute which is used to define an interaction that is run for all cue points. For more details, see the section on cue points below.

Styles

These styles or their behaviors are particular to the video tag:

  • wants-reset: This is a standard style but unless it's set explicitly to "false" then the video tag will set it to true. (It's normally false.) See the section on Video Resets below for details.
  • resize-scale: One of "none," "showmost" or "showall," this style helps determine how a video will appear when width and height styles are set on the video tag. See the section on Video Scaling below.
  • resize-scale-origin: One of "left," "center" or "right" and "top," "middle" or "bottom."
  • video-loop: If true then the video will replay from the beginning one it completes.
  • video-auto-play: If true then the video will automatically begin playing once it's ready and enabled. See the section on Video Resets below.
  • video-auto-rewind: If true then the video will jump to the beginning once it finishes.
  • video-skin: Use this style to set a URL for the Flash FLVPlayback videoSkin property. It should be the URL of a SWF that is compatible as a FLVPlayback skin.
  • base-url: While not particular to the video tag, it's worth mentioning that it applies to both the value of the "src" attribute and the "video-skin" style.
  • control-attacher-index: Use this style to change where the FLVPlayback skin is attached. See the discussion on Video Skins below.
  • video-skin-auto-hide: This style maps directly to the skinAutoHide property of the Flash FLVPlayback class.
  • video-skin-background-alpha: This style maps directly to the skinBackgroundAlpha property of the Flash FLVPlayback class.
  • video-skin-background-color: This style maps directly to the skinBackgroundColor property of the Flash FLVPlayback class.
  • video-skin-fade-time: This style maps directly to the skinFadeTime property of the Flash FLVPlayback class.
  • video-skin-scale-maximum: This style maps directly to the skinScaleMaximum property of the Flash FLVPlayback class.
  • video-volume: This style maps directly to the volume property of the Flash FLVPlayback class.
  • video-buffer-time: This style maps directly to the bufferTime property of the Flash FLVPlayback class.
  • video-full-screen-background-color: This style maps directly to the fullScreenBackgroundColor property of the Flash FLVPlayback class.
  • video-full-screen-skin-delay: This style maps directly to the fullScreenSkinDelay property of the Flash FLVPlayback class.
  • video-full-screen-take-over: This style maps directly to the fullScreenTakeOver property of the Flash FLVPlayback class.
  • video-enable-with-show: If true then the video container will be disabled when it is hidden (either by setting the style "visibility" to "hidden" or "display" to "none" or by calling "show ( false )" on it's object) and enabled when it is shown. The default value is true.
  • deep-link: One of either "path" or "query." While not particular to the video tag, the video tag supports deep linking to cue points in a video. See the section on Cue Points below.


Cue Points

We add cue points to a video to provide navigation or to trigger actions when they occur. Frontal leverages the FLVPlayback functionality to implement cue points and so read the Flash documentation on them to understand their limitations. (Mainly that the video has to play over a cue point to trigger it - it's not enough to scrub the playhead over it.)

To create a cue point, we use specially named attributes. Any attribute that begins with "cuePoint" (the check is case insensitive) will be treated as a cue point definition. Its value should be a number (the time of the cue point in seconds) optionally followed by a comma and a name. For example: 

cuePoint1="5"

will create a cue point at 5 seconds. And this: 

cuePointBlue="2.5,The Blue Part of the Video"

will create a cue point at 2.5 seconds with the name "The Blue Part of the Video."

We can add an interaction to run whenever a cue point occurs by taking the name of the cue point attribute and prefixing it with "on." For our previous examples then we'd add interactions named "oncuePoint1" and "oncuePointBlue." Let's put this together into an example. Note that we could apply these attributes directly to the video tag but we take advantage of the "@" syntax in our style sheets to make things a bit more readable. 

<style><![CDATA[
    document
        {
            background-color: white;
            style-tween-ease: fl.transitions.easing.Regular.easeOut;
            style-tween-duration: 5;
        }
    #myVideo
        {
            video-auto-play: true;
            @cuePoint1: 5,Five Seconds In
            @oncuePoint1
                {
                    document.prepStyleTween ( );
                    document.sS ( "background-color", "blue" );
                    document.tweenStyles ( );
                }
        }
]]></style>
<video id="myVideo" src="http://www.frontalcode.com/assets/video/video_1.flv" />

In this example, we've added a cue point to our video at 5 seconds. Then we added an interaction such that when the video reaches this cue point, we change the background color of the document to blue. Run the code sample so check it out.

We may also define the "onAnyCuePoint" interaction which will be run whenever any cue point is hit. This is handy if the behavior for each cue point is similar.

As food for thought, imagine how cue points could be used to drive advertising relevant to the video. For example, a cue point could be associated with certain keywords. Then, a cue point interaction could use those key words along with access to an ad server to drive a dynamic ad slide show as the video played.

Deep Linking

With cue points, we can create deep links into a video. First, a deep link is a URL that when pasted in your browser's address bar causes certain content to be displayed in the resulting page. So in this case, that means that a cue point in a video may have it's own URL. Moreover, as cue points pass, they will update your browser's address so that the browser's previous and next buttons can be used to move between them.

To turn on deep linking for a video, we use the "deep-link" style and we sit it to either "path" or "query." When set to "path" (at most one element in the Frontal movie may have this style), then the deep link will look like a directory path. When set to "query" (as many elements as you like may have this style), then query parameters will used in the URL to store the deep link.

Frontal uses the SWFAddress Actionscript and Javascript library to achieve this functionality. Please refer to its documentation for details about it and any limitations it may have.

So for example, let's add several cue points to a video along with the deep-link style to see how it acts. 

<style><![CDATA[
    #myVideo
        {
            video-auto-play: true;
            deep-link: path;
            @cuePoint0: 0,Starting!
            @cuePoint5: 5,Five Seconds In
            @cuePoint10: 10,Ten Seconds In
            @cuePoint15: 15,Fifteen Seconds In
            @cuePoint20: 20,Twenty Seconds In
        }
]]></style>
<video id="myVideo" src="http://www.frontalcode.com/assets/video/video_1.flv" />

Notice how the browser's address and title changes as the video plays. (The title will only change when deep-link is set to "path.") Also notice how the browser's next and previous buttons move between cue points. And finally, notice how if you refresh the browser at some cue point, when the page loads the video starts from that cue point.


Jumping to a Cue Point

We can use the deep link functions described at the beginning of this section to create a button that jumps to a cue point in a video. This method will work even if the deep-link style is not set on the video.

In this example, we create a style class that can be applied to any tag. As well as applying the style class, also define the attributes videoId (set to the id of the video tag we wish to control) and cuePointNdx (set to the time or the name of a cue point). 

<style><![CDATA[
    #myVideo
        {
            video-auto-play: true;
            @cuePoint0: 0,Starting!
            @cuePoint20: 20,Twenty Seconds In
        }
    .cuePointLink
        {
            is-link: true;
            @onClick
                {
                    var video = gE ( gA ( "videoId" ) );
                    video.processDeepLink ( video.getDeepLinkValue ( gA ( "cuePointNdx" ) ) );
                }
        }
]]></style>
<video id="myVideo" src="http://www.frontalcode.com/assets/video/video_1.flv" />
<text class="cuePointLink" videoId="myVideo" cuePointNdx="0">Starting!</text>
<text class="cuePointLink" videoId="myVideo" cuePointNdx="20">Twenty Seconds In</text>


Video Scaling

The video tag uses the FLVPlayback class's scaling capabilities to size the video playback. The capabilities come into play when we set the width and height styles of the video tag in such a way that they might not match the dimensions that the video was encoded at. Then we use resize-scale and resize-scale-origin to determine how the video will fill the specified rectangle.

First, though, we note that if no width or height styles are set then the video is shown at it whatever dimensions it was encoded at: 

<video style="video-auto-play: true;" src="http://www.frontalcode.com/assets/video/video_1.flv" />

Now let's set a width and height. If we also set resize-scale to "showmost" then the video will be scaled to fill the rectangle even if this means some of the video will be cropped. 

<video style="width: 20%; height: 100%; resize-scale: showmost; overflow: hidden; video-auto-play: true;" src="http://www.frontalcode.com/assets/video/video_1.flv" />

In contrast, let's set resize-scale to "showall". Now the video is scaled so that it fits in the video tag's width and height even if that rectangle is not completely filled. 

<video style="width: 20%; height: 100%; resize-scale: showall; overflow: hidden; video-auto-play: true;" src="http://www.frontalcode.com/assets/video/video_1.flv" />

If we want to stretch the video to fill the video tags dimensions then we set resize-scale to "stretch": 

<video style="width: 20%; height: 100%; resize-scale: stretch; video-auto-play: true;" src="http://www.frontalcode.com/assets/video/video_1.flv" />

If we want the video to be shown at its encoded size regardless of the video tag's dimensions then we set the resize-scale style to "none". 

<video style="width: 20%; height: 100%; resize-scale: none; overflow: hidden; video-auto-play: true;" src="http://www.frontalcode.com/assets/video/video_1.flv" />


Positioning the Scaled Video

In the previous section we saw the different ways that a video can be scaled when the video tag is given various width and height styles. You may have noticed that the location of the video within the rectangle defined by these widths and heights was always at the top left corner. We can change this with the "resize-scale-origin" style.

The "resize-scale-origin" style can take one or two values from "left," "center" or "right" and "top," "middle" or "bottom." For example, here we size the video to fill the browser pinned to the lower right corner. Paste the example in the online workspace and resize the browser to see how the bottom right corner is always visible. 

<video style="resize-scale-origin: bottom right; resize-scale: showmost; width: 100%; height: 100%; video-auto-play: true;" src="http://www.frontalcode.com/assets/video/video_1.flv" />

In this example, we center the unscaled video in the middle of the browser: 

<video style="resize-scale-origin: center middle; resize-scale: none; width: 100%; height: 100%; video-auto-play: true;" src="http://www.frontalcode.com/assets/video/video_1.flv" />


Video Resets

As we've discussed elsewhere, an element may be reset under certain circumstances. For example, if a tag is being managed by a manager tag or is the child of such a tag and has the "wants-reset" style set to true, then it will reset whenever it is selected.

For the video tag, "wants-reset" is set to true by default whereas it is normally false. This is because whenever a video tag is reset, it makes sense to replay the video from the beginning as in this example. 

<div style="layout: stack;">
    <manager id="mgr" style="hide-unselected: true;" />
    <video style="video-auto-play: true;" src="http://www.frontalcode.com/assets/video/video_1.flv" />
    <text>Click again!</text>
</div>
<text class="frButtonNext" mgrId="mgr">next</text>

You can turn off this behavior by setting the "want-reset" style to "false."


Video Skins

A video skin may be attached to a video using the "video-skin" style. The value is the URL of a SWF that is compatible with the FLVPlayback to act as a skin. 

<style><![CDATA[
    video
        {
            video-skin: http://www.frontalcode.com/assets/skins/SkinOverAll.swf;
        }
]]></style>
<video src="http://www.frontalcode.com/assets/video/video_1.flv" />

With Frontal, we may choose to attach the skin somewhere other than on the video. To do this, we create a visual element with an id and place it where we would like the skin to appear. Then on the video tag we add the style control-attacher-id set to the id of this element. Here for example we pin the skin to the lower right of the browser. 

<style><![CDATA[
    video
        {
            video-skin: http://www.frontalcode.com/assets/skins/SkinOverAll.swf;
            control-attacher-index: videoSkin;
        }
]]></style>
<video src="http://www.frontalcode.com/assets/video/video_1.flv" />
<div id="videoSkin" style="right: 100%; bottom: 100%; width: 300px;" />

Note that the skin will position itself relative to the attacher element just as it would relative to the bottom of the video. That is, if it is an "over" skin, then it will display itself above the top left corner of the attacher element. This means that in our example (in which we are using an "over" skin), if we had added the style "overflow: hidden;" to the attacher element then we would not see the skin. If the skin were an "under" skin then we would need to add a height to the attacher element so that it wouldn't be placed of the bottom of the browser.

The skin will also size itself to the width of the attacher element. There is an issue though where the size of the video playback ultimately puts a limit on how large the skin will size.

When putting the video into full screen mode, the video skin will detach itself from the attacher and reattach itself as normal to the video. This is necessary otherwise the controls would not be visible when in fullscreen mode.


The "enabled" Property

The enabled property on the video tag has some special features. When the value of this property is changed to false, the video is examined to see if it is playing or not. Then the video is paused. When the value of the property is changed to true, then if the video had been playing when it was disabled, then it resumes.

The style "video-enable-with-show" takes advantage of this property by enabling the video when it is showing (attached to the Stage's display list) and disabling it when it is hidden. This is convenient for video elements that are controlled by a manager with the "hide-unselected" style as it means when the video is deselected it will automatically pause its playback.

Retrieved from "http://www.frontalcode.com/wiki/index.php/Video"
Personal tools
Get Adobe Flash player