VideoPress player: Changing HTML5 player, add chapters and more

by 360 BrightMedia | How-to

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. VideoPress player: Changing HTML5 player, add chapters and more 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. VideoPress player: Changing HTML5 player, add chapters and more 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: VideoPress player: Changing HTML5 player, add chapters and more 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]

0 Comments

Submit a Comment

Your email address will not be published.

More from the Magazine

How to Optimize WooCommerce Product Pages for Better Ranking?

After launching on September 27, 2011, WooCommerce product has 5 Million plus active installations now. The number of users is increasing daily. The reasons for the huge popularity of this platform are: Price: Totally free to use. If needed you can add paid...

4 Ways To Make Your WordPress Site Mobile-Friendly

Having a mobile-friendly WordPress site will help your website be Search Engine Optimised, which is a great deal when it comes to promotion and website success. Poor SEO won’t be your only concern if your site isn’t properly built- losing customers because of the poor...

How to Optimize Content for Featured Snippets?

Over the past years, Google has been changing its policies in the way it displays results to its users. If you want to drive more traffic to your site and want users to click on your content, showing up as a featured snippet in Google search will help. Google has been...

Keep your WordPress Website Safe and Secure – Here’s How

Source Website security and safety are of utmost importance. Even though you would have taken all the necessary precautions, it is vulnerable, and security threats are significant. Google tackles these threats with a heavy hand and ends up blocking the sites...

How to Recover your Website’s SEO from a Hacked WordPress Site

WordPress, the most popular content management system is an ideal place for most of the businesses out there. However, this doesn’t mean that it is unhackable. As WordPress is so popular, hackers take their time and effort to hack WordPress websites and their SEO. If...

Top 10 Amazing Web Designing Tips To Ensure Maximum Conversion

Among various aspects of web development, web designing is undoubtedly the most crucial part. A well-researched fascinating design can lead a project to stunning success while a lack of considerations can prove a nightmare for the investing firm. Whether you are an...

Meet BuddyForms BuddyPress Post in Groups

Among the add-ons that you definitely need to have available on your website, you need to know BuddyForms BuddyPress Post in Groups, its functionalities and benefits will allow you to better develop your online business. It's great for creating BuddyPress groups for...

Must have Features for WordPress WebSite

WordPress is the most popular and preferred platform to launch business websites. According to the WordPress official site,  “WordPress website now account for over 1/3rd of the top 10 million sites. Our market share has been growing steadily over the last few...

How to Make Sure Your WordPress Site is Mobile-Friendly?

With the evolution of technology, the digital marketing plan also has evolved.  For some years, an immeasurable growth of mobile phone usage is being seen. Mobile phones are in use for many reasons. And the most prevalent and common is visiting the website for...

Ultimate Member Benefits

If you need to create an exclusive community for a specific objective, you can take advantage of the benefits of Ultimate Member, a plugin that will provide benefits to scale your business. It is ideal for platforms where user registration is required to access...
Share This