VideoPress player: Changing HTML5 player, add chapters and more

WordPress.com has a new service: VideoPress. With VideoPress you can manage your videos for WordPress very easy and you don’t have to think about the streaming or your webspace. Just buy your VideoPress account and install the VideoPress plugin. That’s it! However. The base functions are ok for publishing videos but if you want more you will run into problems. We had the problem, that we wanted to add chapters to the videos but there was no way to do it with the VideoPress plugin. We hoped for an API in the plugin but the only point we found was the actionhook “video_flash_params” which only allows to change flash parameter tags for the video. So we thought that we should focus on the player and should try to find a way to communicate with it. After a long research we found a way o do it. The player works in two kind of mods. The first mod uses the flash player (embedded is a kind of the OSMF Player) and the other mod is the HTML5 mod. The flash player seems not to have an API. We can’t find any documentation of the player, so we decided, to try out a way to communicate with the HTML5 player and we made it!

Overwriting the player

At first we had to search a player. We decided to use the VideoJS player and had to include the player scripts and CSS. We put the files of the player in the theme directory and included it. Just as this: [html] type=”text/css” media=”screen” title=”Video JS”> [/html] After including the scripts, we had to communicate with the player. But we can’t do it without to know the player id. In the template of our theme we need it to start the VideoJS player. The only way to get it, is to communicate it to the template by using custom fields. You have to take the VideoPress video id which you can get from the shordcode. Just take the video id from the shortcode and insert it into a new custom field. We created one named ‘videopress_video_id’ and have written the video id in it. We have saved the post with the video and our custom field and have to start the player on the site. That’s really simple, because you only have to start it by using jQuery with the value id of the video. [html] < ?php $videopress_video_id = get_post_custom_values( ‘videopress_video_id’ , $post_id ); ? > [/html] That’s it! The player worked. But that’s not all: you can do many more things with your player now. Just use the jQuery API of the VideoJS layer. In our case the jQuery we used looks like this: [html] jQuery(function ($) { $(“#v-< ?php echo $videopress_video_id[0]; ? >-video”).VideoJS(); $(“#v-< ?php echo $videopress_video_id[0]; ?>-video”)[0].player.play(); }); [/html] The player on the site should look like this and start the video: If you want to know more functions you can use with the player, just take a look in the video.js. There you can see a lot of functions you can use with the player like currentTime (Line 181), duration (Line 831), volume (Line 848) and so on.

Adding chapters

For skipping through chapters you have to set the current time of the video and you need a button to skip to it. At first you create a button just like this: [html] Next Chapter [/html] The next thing you have to do is adding an action to the button. You can do this easily by adding some jQuery: [html]