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 -->

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

Difference between undefined and null in JavaScript

Posted in Javascript, javascript interview questions

undefined means value is not assigned to a variable while null is a value which can be assigned to variables. null is a reserved keyword in JavaScript while undefined is a built in object in JavaScript.

Example:

  var a;
  console.log("Value of a is: "+ a);

Above statement will return “Value of a is undefined” because variable a is just declared and value of the variable a is not defined yet.

  var a=null;
  console.log("Value of a is: "+ a);

Now, we are assigning a “null” value to variable a. Above statement will return null value in console.

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

Ten Common JavaScript Bugs and How to Avoid Them

Posted in Javascript

JavaScript is a client side programming language. Anyone having little bit programming knowledge can do JavaScript programming. But programmers make mistakes while coding. Sometimes, these mistakes cause your program to not produce the result that you wanted. Anything that causes a program not run as expected is called a bug. To catch these bugs and errors in your program, a programmer should have good debugging skills. In this article, we will point out most common mistakes a JavaScript programmer often make.

  • Brackets Mismatch

    This is most common mistake that programmers make while coding. They write huge lines of code and they often miss out ending brackets of function.

    brackets-mismatch-error-javascript

  • Missing Parentheses

    This error most often occur in conditional statements. Consider below example.

       if((x > y) && (y < 125) {
            ...
       }
          

    In above code, last parenthesis of if statement is missing. In order to be correct, this statement should be as follows.

        if ((x > y) && (y < 125)) {
                   ...
        }
           
  • Missing Semicolon

    Every statement in JavaScript should end with a semicolon. However, JavaScript code will work even without semicolon. But sometimes if you are using classes in you code then you have to use semicolon at the end of functions and properties.

  • Capitalization Errors
    This error occurs if you spelled JavaScript keyword incorrectly. For example, you typed document.getElementByid(). JavaScript won’t understand this. The correct statement should be document.getElementById().


  • Referencing DOM element Before It's Loaded

    This error occurs if you try to access a DOM element before it is loaded. Your code should wait for the DOM to load.
    dom-element

    Above code will result in error because browser doesn’t know about the div with id=”myText”. The script is trying to access the div with id=”myText” before it is loading into the DOM.

    The correct code is here.
    dom-element-corret

    Call changeText() function in onload function of the body or you can use document.ready JQuery function to access DOM element after it’s loaded.

    We will see another example of this while using document.ready() function.

    document-ready

    In above code, you are trying to change html of a div with id=”content” which is not loaded yet. This code won’t change html of content div. In order to work above code, you have to call this code inside document.ready() function.

    documet-ready-correct

  • Missing Parameters in Function Calls
    Whenever you are defining any function you are declaring number of parameters of that function. But, sometimes at the time of calling a function developer might miss to pass parameters to that function. This creates a syntax error in you code. Make sure to give parameters descriptive names when you create a function.

  • Bad variable/function names

    There are around 50 reserved keywords in JavaScript. Sometimes developers declare a variable with this reserved words. In JavaScript, you cannot use any of the reserved keywords to name your variable. Also give meaningful names to your variables and function and names should be in camel case pattern. For example,

       var carSpeed;
       function calculateDistance(){
           ...
       }
    
      
  • Equality Confusion
    Sometimes developer’s make a mistake in equality and assignment operator. This creates unexpected error.
    assignment-operator

    In above code, assignment operator is used instead of equality operator. This creates “Invalid left-hand side assignment” error. The correct code should be like this

    equality-operator

  • Missing Quotes
    While string concatenation developers’ forgot to close the string with quotes.

    missing-quotes

    This creates syntax error and will stops the execution of script. You should use proper single/double quotes while concatenating strings. Correct script is as follows.

    missing-quotes-correct

  • Accessing element at an index in array which is not exists.
    Sometimes you are trying to access an element of an array at index which is not exists. This creates type error and will stop execution of your script.array-index-error

    To avoid these kind of errors, enclose your code inside try catch block. Try catch statement will continue your script execution even if there is runtime error in your code.