Integrate the Brightcove video player

The video selected in the file element or file component does not render without a Brightcove video player. Brightcove provides a customizable player we can copy and paste into a Web Content Manager presentation template or HTML component.

In this example, the video ID can be accessed with the format parameter videoID in component or element tags.

[Element context="current" type="content" key="Video" format="videoID"]
Accesses the video ID of a file element named "Video".

The following example replaces the hardcoded video player ID with the element tag. Replace the value YOUR PLAYER TOKEN and YOUR PLAYER KEY in the playerID and playerKey parameters.

<style type="text/css">
  .outer-container {
           position: relative;
           height: 0;
           padding-bottom: 56.25%;
         }
         .BrightcoveExperience {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
         }
     </style>
 <div id="container1" class="outer-container">
<!-- Start of Brightcove Player -->
<div style="display:none">
 </div>
 <!--
By use of this code snippet, I agree to the Brightcove Publisher T and C  found at https://accounts.brightcove.com/en/terms-and-conditions/.  -->
 <script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
 <object id="myExperience_[Property context="current" type="content" field="id"]" class="BrightcoveExperience">
  <param name="wmode" value="transparent" />
   <param name="bgcolor" value="#FFFFFF" />
  <param name="playerID" value="YOUR PLAYER TOKEN" />
  <param name="playerKey" value="YOUR PLAYER KEY" />
  <param name="isVid" value="true" />
  <param name="isUI" value="true" />
  <param name="dynamicStreaming" value="true" />
     <param name="@videoPlayer" value="[Element context="current" type="content" key="Video" format="videoID"]" />
</object>
 <!--  This script tag will cause the Brightcove Players defined above it to be created as soon as the line is read by the browser. If we wish to have the player instantiated only after the rest of the HTML is processed and the page load is complete, remove the line.
-->
<script type="text/javascript">brightcove.createExperiences();</script>
 <!-- End of Brightcove Player -->
</div>

If the following message displays for every video, The video we are trying to watch is currently unavailable. Please check back soon., verify the player token and key are correct.

For a playlist player, the playlistTabs parameter must point to the ID of the currently selected playlist.

<param name="@playlistTabs" value="[Element context="current" type="content" key="Video" format="videoID"]"/>

We can store these markup templates as an HTML component and have different components for each player. Then, we can combine the file and player in one authoring template. For example, we can add a File Element called Video and a Component Reference called Video Player.

Then, display the player in the presentation template. In this example, we can change the selected video with inline editing.

[EditableElement context="current" type="content" key="Video" format="div"]
   [Element context="current" type="content" key="Video player"]
 [/EditableElement]

The Brightcove video player is not supported in Opera.

Parent Integrate with Brightcove

Related tasks:

Create an editable element tag