Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Brightcove Video API

Posted in Brightcove JS

brightcove-js

Earlier we were using flash to play video in web pages. But, now flash has very little support in modern browsers such as mobile browsers. HTML 5 provides video tag to play video on web pages. Consider below HTML 5 video example.

<video src="/videos/video.mp4" controls>
</video>

Video tag has src attribute to which we can provide video path. Someone can easily view and see this path in web browser console. So, you cannot prevent users to download and hack your video.

video-HTML5

To prevent this, use brightcove video API to play video in web page. To use brightcove API create account in brightcove cloud server. After creating account upload your video in brightcove server. You can visit http://support.brightcove.com/en/video-cloud/training-videos/topics/3349 this link to get more information on how to create basic setup in brightcove cloud.

Understanding Brightcove.

brightcove-video

Referring above figure, use any player to play video using brightcove API. You have to change only playerID and playerKey in brightcove parameters to use different players.

Brightcove video code will look like this.

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

<object id="myExperience3910883374001" class="BrightcoveExperience">
  <param name="bgcolor" value="#FFFFFF" />
  <param name="width" value="600" />
  <param name="height" value="535" />
  <param name="playerID" value="3902807833001" />
  <param name="playerKey" value="AQ~~,AAAB7SJ4Y0E~,bSlWZjVVvKKpj_y1xN_ScmT8BhRmEVxU" />
  <param name="isVid" value="true" />
  <param name="autoStart" value="true" />
  <param name="isUI" value="true" />
  <param name="dynamicStreaming" value="true" />
  <param name="@videoPlayer" value="3903198955001" />
</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 you 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 -->

First include BrightcoveExperiences.js script. In object tag set configuration parameters mentioned below.

  <param name="width" value="600" />
  <param name="height" value="535" />

“width” and “height” parameters determines your video dimensions.

  <param name="bgcolor" value="#FFFFFF" />

“bgcolor” sets background colour to your video.

  <param name="autoStart" value="true" />

“autoStart” if set to true video will play automatically as soon as video loads. Default value is false.

 <param name="@videoPlayer" value="3903198955001" />

“@videoPlayer” this is video id in brightcove cloud.

If you are playing brightcove video in secured connection (over https), include following parameters in your brightcove configuration code.

secured

  <param name="secureConnections" value="true" />
  <param name="secureHTMLConnections" value="true" />

Also, load the BrightcoveExperiences.js script through https.

 <script language="JavaScript" type="text/javascript" src="https://sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>

The entire code will look like this.

<script language="JavaScript" type="text/javascript" src="https://sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>

<object id="myExperience3910883374001" class="BrightcoveExperience">
  <param name="bgcolor" value="#FFFFFF" />
  <param name="width" value="600" />
  <param name="height" value="535" />
  <param name="playerID" value="3902807833001" />
  <param name="playerKey" value="AQ~~,AAAB7SJ4Y0E~,bSlWZjVVvKKpj_y1xN_ScmT8BhRmEVxU" />
  <param name="isVid" value="true" />
  <param name="autoStart" value="true" />
  <param name="isUI" value="true" />
  <param name="dynamicStreaming" value="true" />
  <param name="@videoPlayer" value="3903198955001" />
  <param name="secureConnections" value="true" />
  <param name="secureHTMLConnections" value="true" />
</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 you 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 -->