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:
|
1 2 3 4 5 6 7 8 |
<video id="my_video" class="video-js vjs-default-skin" controls preload="auto" width="511" height="382" poster="/test-video/testvid_01.jpg" data-setup="{}"> <source src="" type="video/mp4" /> <source src="" type="video/webm" /> <source src="" type="video/ogg" /> </video> |
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:
|
1 2 3 4 5 6 7 |
<div class="wrap"> <input rel="01" type="button" value="cargar video 1"> <input rel="02" type="button" value="cargar video 2"> <input rel="03" type="button" value="cargar video 3"> </div> |
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()”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
jQuery("input[type=button]").click(function() { var $target = "testvid_"+jQuery(this).attr("rel"); var $content_path = "/test-video/"; var $vid_obj = _V_("my_video"); // hide the currently loaded poster jQuery("img.vjs-poster").hide(); $vid_obj.ready(function() { // hide the video UI jQuery("#my_video_html5_api").hide(); // Pause the video being played $vid_obj.pause(); // Assign the new set of videos to the corresponding nodes in the player jQuery("video:nth-child(1)").attr("src",$content_path+$target+".mp4"); jQuery("video:nth-child(1)").attr("src",$content_path+$target+".ogv"); jQuery("video:nth-child(1)").attr("src",$content_path+$target+".webm"); // replace the source image of the poster jQuery(".vjs-poster").css("background-image","url("+$content_path+$target+".jpg)").show(); // reset the UI states jQuery(".vjs-big-play-button").show(); jQuery("#my_video").removeClass("vjs-playing").addClass("vjs-paused"); // Load the new video sources in the player $vid_obj.load(); jQuery("#my_video_html5_api").show(); }); }); jQuery("input[rel='01']").click(); |
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 !
—