Brightcove Video Player Integration

From Frontal Wiki

Jump to: navigation, search

In the following example, we've integrated a Brightcove video player with Frontal. Because the Workspace doesn't have the Brightcove classes compiled into it, this example won't work there. But when compiled with the Brightcove classes, it queries Brightcove for the contents of a play list, creates draggable thumbnails for each entry that, when clicked, load the appropriate video into the Brightcove player. It also enables deep linking, allowing you to link directly to specific videos, and enabling a browser's next and previous buttons to switch between videos. 

<style><![CDATA[
    .brightcovePlayer
        {
            @onGetDeepLinkValue
                {
                    return index;
                }
            @onProcessDeepLink
                {
                    if ( value != null && dynamic.mPlayer != null && dynamic.mContent != null && dynamic.mContent.getMedia ( value ) != null )
                    {
                        dynamic.mPlayer.loadVideo ( value );
                    }
                }
            @onFirstDocumentPreRender
                {
                    dynamic.templateLoaded = function ( evt )
                        {
                            dynamic.mPlayer = dynamic.bcp.getModule ( "videoPlayer" );
                            dynamic.mContent = dynamic.bcp.getModule ( "content" );
                            dynamic.mExp = dynamic.bcp.getModule ( "experience" );
                            dynamic.mExp.addEventListener ( "templateReady", dynamic.templateReady );
                        }
 
                    dynamic.templateReady = function ( evt )
                        {
                            dynamic.mExp.addEventListener ( "contentLoad", dynamic.contentLoad );
                            dynamic.mPlayer.addEventListener ( "mediaChange", dynamic.mediaChange );
                            dynamic.mContent.addEventListener ( "mediaCollectionLoad", dynamic.mediaCollectionLoad );
                            dynamic.mContent.addEventListener ( "mediaLoad", dynamic.mediaLoad );
                        }
 
                    dynamic.contentLoad = function ( evt )
                        {
                            dynamic.mContent.getMediaCollectionAsynch ( gA ( "mediaCollectionId" ) );
                        }
 
                    dynamic.mediaChange = function ( evt )
                        {
                            com.frontalcode.DeepLinkManager.updateDeepLink ( this, evt.media.id, null );                
                        }
 
                    dynamic.mediaCollectionLoad = function ( evt )
                        {
                            for ( var i = 0; i < evt.mediaCollection.mediaIds.length; i++ ) dynamic.mContent.getMediaAsynch ( evt.mediaCollection.mediaIds [ i ] );
                        }
 
                    dynamic.mediaLoad = function ( evt )
                        {
                            if ( gE ( "mediaId_" + evt.media.id, true, false ) == null )
                            {
                                var entryNode = com.frontalcode.DocElemTemplate.getTemplateByName ( "brightcoveMediaEntry" ).copy ( );
                                document.insertXML ( entryNode, gE ( "video_list" ) );
                                var entry = document.getNodeElement ( entryNode );
 
                                entry.sA ( "id", "mediaId_" + evt.media.id );
                                entry.gE ( "displayName", false ).text = evt.media.displayName;
 
                                if ( evt.media.shortDescription != null )
                                    entry.gE ( "shortDescription", false ).text = evt.media.shortDescription;
                                else
                                    entry.gE ( "shortDescription", false ).sS ( "display", "none" );
 
                                if ( evt.media.longDescription != null )
                                    entry.gE ( "longDescription", false ).text = evt.media.longDescription;
                                else
                                    entry.gE ( "longDescription", false ).sS ( "display", "none" );
 
                                if ( evt.media.linkURL != null )
                                {
                                    entry.gE ( "link", false ).text = evt.media.linkText == null ? evt.media.linkURL : evt.media.linkText;
                                    entry.gE ( "link", false ).sA ( "href", evt.media.linkURL );
                                }
                                else
                                    entry.gE ( "link" ).sS ( "display", "none" );
 
                                entry.gE ( "play", false ).sA ( "videoPlayerId", gA ( "id" ) );
                                entry.gE ( "play", false ).sA ( "mediaId", evt.media.id );
 
                                var id = checkForDeepLink ( );
                                removeListener ( com.frontalcode.DeepLinkManager.getInstance ( ), com.frontalcode.FrontalEvent.INITIALIZED, deepLinkInitializationHandler );
                                if ( id == evt.media.id ) processDeepLink ( id );
                            }
                        }
 
                    dynamic.bcp = new BrightcovePlayer ( );
                    dynamic.bcp.addEventListener ( "templateLoaded", dynamic.templateLoaded );
                    movie.addChildAt ( dynamic.bcp, 0 );
                }
        }
 
    .brightcoveMediaEntry [name=play]
        {
            @onClick
                {
                    gE ( gA ( 'videoPlayerId' ) ).dynamic.mPlayer.loadVideo ( gA ( 'mediaId' ) );
                }
        }
 
]]></style>
 
<template name="brightcoveMediaEntry">
    <div class="brightcoveMediaEntry" onMouseDownRaw="movie.startDrag(false,new flash.geom.Rectangle(parent.movieOffsetX,parent.movieOffsetY,parent.contentWidth - containerWidth,parent.contentHeight - containerHeight));" onMouseUpAnywhere="movie.stopDrag();synchStyles();" style="alpha: 0.8; color: #333333; background-color: #ffffff; border-width: 1px; border-color: #cccccc;">
        <text name="displayName" style="bold: true;" />
        <text name="length" />
        <text name="shortDescription" />
        <text name="longDescription" />
        <text name="link" class="frLink" href="" target="_blank" />
        <text name="play" videoPlayerId="" mediaId="" style="is-link: true;"><![CDATA[Play >]]></text>
    </div>
</template>
<div id="video" style="width: 486px; height: 412px; deep-link: query;" mediaCollectionId="23754290001" mediaCollectionListIndex="video_list" class="brightcovePlayer" />
<div id="video_list" style="overflow: hidden; width: 486px; height: 200px; border-width: 1px; scroll: auto;" />
Retrieved from "http://www.frontalcode.com/wiki/index.php/Brightcove_Video_Player_Integration"
Personal tools
Get Adobe Flash player