How-to

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:

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.

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:

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:

The next thing you have to do is adding an action to the button. You can do this easily by adding some jQuery:

The player now wents to the second 125 and plays the video. Have fun!

More from the Blog

View all posts

News

WooCommerce BuddyPress

News

WooCommerce BuddyPress

1 min read

Important Notice On WooCommerce 2.1 Update And BuddyPress Integration Plugin

BuddyForms Form Builder

News

BuddyForms Form Builder

News

3 min read

BuddyForms – Collaborative Publishing for WordPress

How-to

Security

Useful Tools

How-to

Security

6 min read

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

BuddyForms Form Builder

Create Content

Extensions

BuddyForms Form Builder

Create Content

3 min read

What are you waiting to enjoy BuddyForms Attach Posts with Groups?

Community

Create Content

Uncategorized

Community

Create Content

4 min read

How to know if your community likes your content?

Uncategorized

Uncategorized

4 min read

How to update WordPress?

Select the Right SEO Agency

SEO

SEO

9 min read

How to Select the Right SEO Agency for Your SEO Needs

Uncategorized

Uncategorized

7 min read

Is a paraphrasing tool essential for content writers?

WooCommerce BuddyPress

WooCommerce BuddyPress

2 min read

WooCommerce BuddyPress Integration 2.0

BuddyForms Form Builder

News

BuddyForms Form Builder

News

1 min read

BuddyForms Sponsors the first BuddyCamp Europe

Start your next project with us

Whether it's design or development, we're the perfect partner for fast, flexible, forward-thinking projects. Reach out & let's get the conversation started.
Get Started