Jun 162013
 
Article Javascript

In a browser with support for html5, it is possible to insert a video player using the “<video>” tag. Moreover, the status of the player can be controlled with javascript. This includes the possibility to change the video file loaded in the player. With this functionality, we can add buttons or links in our page to choose the video we want to play, with no need to reload the full page.

This post explains and demonstrates the procedure originally presented in  jsfiddle.net, adapted to include this functionality in a wordpress blog post.

Result

The end result obtained is:

We can see that a video player has been embedded in the post, and there are tree buttons below it that allow us to choose the video being played.

The video.js javascript library

The sample code in  jsfiddle.net employs the “video.js” javascript library from www.videojs.com.

In our worpress blog, we need to install the “Video.js – HTML5 Video Player for WordPress” plugin to use that library.

Insert the “<video>” tag

In the sample in jsfiddle.net a html5 tag “<video>” is used to embed the player in the page, as seen below:

In wordpress with the video.js plugin, the  shortcode can be used instead:

The HTML code for the buttons

The buttons are added using standard HTML code:

Each button has a “rel” attribute whose value is used in the javascript code to identify the video file to be loaded in the player.

The javascript code

The javascript code in jsfiddle.net uses the jQuery library.

To make it work in our wordpress installation, the abbreviated syntax “$()” used to call jQuery functions is replaced with the standard syntax “jQuery()”:

 

As we can see, a “click()” function is the defined and assigned to every element of type “button” in the page.

The function starts by identifying the video source to be loaded, using the value of the “rel” attribute of the button that has been clicked.

Then, it gets an object of type video with the help of the “_V_()” function defined in the video.js library.

Finally, assigns a “ready()” function to that object. This function replaces the video sources for each of the video formats mp4, ogv and webm.

At that’s all !

 Posted by at 10:02 am

 Leave a Reply

(required)

(required)