How to modify the Plyr theme

If you're a Galaxie Blog owner, you can change the primary colors of the Plyr controls. The Plyr media player is now themed for Galaxie Blog's themes, but for those who are running Galaxie Blog, you can further modify the Plyr themes by simply changing the .css in the common/libs/plyr/customThemes folder to match your own created theme.

Simply open the plyr.css file in the common/libs/plyr/ folder, and search and replace both the RGB and Hexadecimal values.

The default Plyr .css file specifies a RGB value of 0,179,255, and the hexadecimal value is #00b3ff. There are 5 occurences of both 0,179,255 and 00b3ff.

Plyr Themes now match Galaxie Blog's Kendo UI themes

Kendo UI already has a built in media player, but it is only available if you have a commercial licsense. Telerik did not put it's own media player into it's open source distribution of Kendo Core. However, even if you have a license, I recommend using Plyr. The Pylr media player is far superior, and offers much more functionality, such as supporting captions, add revenue capabilities, and even has air-play support. It also supports Vimeo and YouTube.

I am ditching Kendo's media player and have modified Plyr to support the Kendo default less based themes. All that you need to do is incorporate the proper theme css file in the header after initializing the Plyr.

Getting the new Kendo UI Plyr Themes

I have created a fork and saved my own Plyr GIT repository at https://github.com/GregoryAlexander77/plyr/tree/master/themeCss. There is one .css file for every Kendo UI less based theme.

Happy theme... err, streaming!

Integrating Plyr into your own website

Background

I needed to integrate a new HTML5 Media Player into Galaxie Blog for several reasons. I was using the Kendo UI HTML5 Media Player as it was integrated with the themes that I developed for Galaxie Blog, however, it is not part of the Kendo Core open source distribution, and required other Galaxie Blog owners to have a Kendo UI license.

It was my goal to integrate a new HTML player that was open source. I had thought to use Kendo's media player if the blog owner had a license, however, after integrating Plyr, I determined that Plyr offers quite a bit more functionality than the Kendo Media Player, and changed the default media player to Plyr- even if the blog owner had their own Kendo commercial license.

Why Plyr?

Plyr is a simple, lightweight, accessible and customizable HTML5 media and audio player. It supports HTML Video, Audio, YouTube and Vimeo. It has support for video captions in multiple languages, and has add revenue capabilities. What also excited me is that I could cast my videos to my own TV. Plyr also supports air play, and I wanted to be able to view the video's that I took on my own TV.

How to integrate Plyr into your own website or blog

Integrating Plyr is relatively trivial. I will show you the steps that I used to integrate Plyr into Galaxie Blog. This is meant as a general how to document, if you run into problems or want more information, see the full documentation on the Plyr GitHub site

1. Clone or download Plyr at https://github.com/sampotts/plyr
2. Upload all of the files found in the dist folder to your own site

Once the files have been uploaded, you will need to open the index document of your site and edit a few lines of code

Load the javascript and css files in the head portion of your document like so:

Find the portion of the page where you would like the video to be displayed, and copy and paste the code below into your own webpage. Pay attention to the crossorigin argument. You need to remove the crossorigin argument if your video is hosted on your own site. If the video is hosted elsewhere, such as the plyr cdn site, you'll need to put the crossorigin argument back into the code.

If you have different sized videos, let's say one with 720p and 1080p, put both of the sources in there. The Plyr library will dynamically choose the most appropriate video size that can be rendered on your site. Of course, you can also put in one video source.

Video captions are supported and are optional.

Finally, put the following script at the very end of your code. You need to do this if you need to have more than one video on your page. If you only have one video on your page, the script will not cause any errors, so I advise you to put this at the end of your page.

This article was meant to quickly convey how to put a basic Plyr Media Player on your own web page. You'll definitely want to check out the Plyr GitHub website for more information.

If you want to see how the video looks on Galaxie Blog, see Plyr, a HTML5 media player, is incorporated into Galaxie Blog

In our next article, we'll see how we can share our video to both Facebook and Twitter

Thanks for reading!

Plyr, a HTML5 media player, will be incorporated into the next Galaxie Blog version

Plyr, an open source HTML5 media player, is now the default media player in Galaxie Blog. Plyer will automatically render video or audio when Galaxie Blog finds supported content. To improve page performance, Galaxie Blog will also lazy load the media for you. Plyr is a simple, lightweight, accessible and customizable HTML5 media and audio player. It supports HTML Video, Audio, YouTube and Vimeo. It has support for video captions in multiple langauges, and has add revenue capabilities. For a full list of features, see the Plyr site at https://github.com/sampotts/plyr

If you have a Kendo UI license, you can optionally use the Kendo HTML 5 media player, however, the Kendo Media player is not as functional as Plyr, and it is not open source.