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

BuddyForms Form Builder

Extensions

News

BuddyForms Form Builder

Extensions

2 min read

BuddyForms Private Frontend – Only display the Logged In Author Posts

Marketing

News

Marketing

News

6 min read

Digital Marketing Trends That Are Expected To Become Crucial In 2021

BuddyForms Form Builder

Extensions

News

BuddyForms Form Builder

Extensions

2 min read

New Moderation Tools in Your Hands.

Invite Codes

BuddyForms Form Builder

Invite Codes

Useful Tools

BuddyForms Form Builder

Invite Codes

3 min read

The Power Of Invite Codes

WP Fastest Cache Settings: How to Get Green Score on Google in 2021

How-to

Marketing

SEO

How-to

Marketing

6 min read

WP Fastest Cache Settings: How to Get a Green Score on Google in 2022

How-to

News

How-to

News

8 min read

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

News

WooCommerce BuddyPress

News

WooCommerce BuddyPress

1 min read

New Version of WooCommerce BuddyPress Integration – WooCommerce 2.1 Ready

Uncategorized

Uncategorized

4 min read

Is WordPress a good blogging platform?

Uncategorized

Uncategorized

3 min read

What I’ve learned working with themekraft.staging.wpengine.com

News

WooCommerce BuddyPress

News

WooCommerce BuddyPress

3 min read

WooCommerce BuddyPress Integration – Next Version Coming!

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