VideoPress player: Changing HTML5 player, add chapters and more

by | Aug 12, 2011 | 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.

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]

0/5 (0 Reviews)

0 Comments

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from the Magazine

How to Customize Your WooCommerce Product Page in 2022

If you’re in the e-commerce business and using WooCommerce to build your store, a good product page is essential in getting your customers to talk about your brand. Furthermore, customizing your product page will have your revenue soaring! Why Exactly is a...

8 Reasons Why WordPress Platform Remains Important for Digital Marketing in 2022

The open-source content management system WordPress currently powers 43% of all websites on the internet. That makes WordPress platform by far the most popular CMS globally, so it’s pretty clearly doing something right. If you’re looking for ways to make your digital...

3 Easiest Ways to Make Your WooCommerce Site Mobile-Friendly

3 Easiest Ways to Make Your WooCommerce Site Mobile-Friendly     If you own a WooCommerce site in 2022 and that site is not mobile-friendly, it is bad news. This is a blatant truth.   The competition in the industry is too high in today’s date and when...

3 Tips for Working With Digital Photos

So you’ve taken a bunch of great digital photos during a vacation, event, or outing, but they don’t look as good on the screen as they looked in your head. How do Instagrammers make their photos look great? Are they just stellar photographers? Not...

E-commerce Website Design: Top 10 Ecommerce Design Trends You Need To Know In 2022

Shopping has changed immensely because of the pandemic. People opt to shop online, and when your website is not ready for your customers, your business will fail.  Web design is your first line of offense; that’s why e-commerce stores these days need to focus on...

Top Pros And Cons of Native Vs Hybrid App Development in 2022

Native apps are apps intended to run on a specific OS, while Hybrid apps show elements of both a native app and a web app. The fundamental difference between these two apps is that the primary kind can be created across all stages, though the production of the native...

Benefits of Virtual Reality in WordPress Design and Development

Since the introduction of groundbreaking technologies such as Virtual Reality and AR, the world of web design has undergone a dramatic change. Major automotive brands, gaming brands, healthcare and education programmes have been the early adopters of these...

Why Digital Marketing Will Be An Important Asset For Any Startup Company In 2022

With new start-ups and brands launching each day, start-ups and new brands consequently have to compete with companies and their marketing campaigns that have been running for years. For start-ups to taste success, for instance, they have to market efficiently and...

10 Tips to Optimize Your WooCommerce Website

When we talk about e-commerce platforms, WooCommerce is considered a preferred choice for techies. It is very simple and easy to set up a WooCommerce site. You just need to simply purchase a domain, add the WooCommerce extension then utilize some tips to optimize your...

10 of the Most Important E-Commerce Trends You Need to Know in 2022: A Helpful Guide

The year 2021 brought many developments and challenges for retailers. The industry experienced advancements in technology, while simultaneously being hit with shipping and supply chain issues. The COVID-19 lockdowns forced retailers to become more innovative to reach...

15 Best Donation Plugins For Accepting Charity & Funds

Are you looking for suitable WordPress or WooCommerce-enabled donation plugins? Many plugins in the online marketplace enable you to accept online donations using your WordPress or WooCommerce-enabled site. Using donation plugins on your website is an effective and...

Top 5 Reasons to Choose Custom WordPress Development Over Theme

If you are considering having a website for your business, several questions might come to your mind. How do we develop it? Do we need to outsource website development services? How much does it cost? What platform to choose for the development? Though all of the...

Image SEO best practices for WordPress websites

Google search is one of the main traffic drivers for many websites. However, image search is gaining traction and is more relevant across different industries like photography, videography, e-commerce, entertainment, etc. In this article we’ll talk about Google image...

Is WordPress a good blogging platform?

WordPress has become one of the most important platforms for people all around the world. Being used by approximately one-third of the world’s population, it tops the most loved platforms for blogging with thousands of people adopting it as their first choice...

How is on-demand mobile app development changing the face of business?

Smartphones are the most potent and pervasive technological devices around us. Consumers connected businesses through their smartphones, where mobile apps allow them to get almost anything at the flick of a finger. Mobile apps, are also a way for businesses to connect...

The Ultimate Guide on Web Application Architecture

Learn the basics of web app architecture. In this post, you can find web application architecture types, components, and ways to create web app architecture.  Starting a new web project, you should pick the right architecture. It determines all the logic of app...

Digital Marketing: Use These Hacks to Boost Your Leads in 2021

Image (Source) Introduction  One thing the 2020 year has taught us is that it is never too late to grab new opportunities to sustain your business. COVID-19 pandemic has given an immense rise to online platform usage. It helps the businesses to continue their leads...

Deprecated Plugins on Themekraft

(Source) In a normal company’s lifespan, a lot of work is done, customers are acquired, and problems are surpassed. Also, many products are launched, and because of that many times, some of those products get left behind by time, technological advances, replaced...

Web Development Strategies for an Outstanding Site

Did you know that 59.5% of the entire world population uses the internet daily? Of this, about 92.6% use mobile devices to access the web. These people are using the internet to find products and services, connect with friends, work, and for entertainment. For any...

Lifetime Deals

Lifetime Deals or LTD is one of the most popular of many ways to sell your digital products in the SaaS industry. Subscriptions, standalone for free, and charge for some functionalities, Bundles, Addons, etc  While the subscriptions and the add ons have been around...

Best Google Analytics Plugins for WordPress in 2021

If you want to understand the behavior of your website or blog visitors and from where they are coming to your site. You need analytics plugins that will help you to easily track the behavior of your website visitors & traffic resources.  If you are a WordPress...

5 Hottest Trends of PHP Development in 2021

Quick Summary: With the latest updates in modern technology and trends, web development is also evolving and gaining continuous popularity over the past few years. Tech and non-tech businesses are searching for the new  PHP web development trends for developing a...

WordPress Security: How to Protect Your Website and Be Safe

Many site owners often complain that WordPress security sucks. Usually, this line of thinking stems from WP being an open-source platform thus being more vulnerable to external attacks. But, how true is that? Is WP secure? The truth is – YES. It is secure. It’s...

Guest Posts and Pay For Submission on Themekraft

(Source) We have always claimed that we have an educative role in the community and because of that, we’ll share our procedures to manage Guest Posts. Also, if you want to implement a Guest Post or even a Pay for Submission method, this article may help you a great...

Our Products

Share This