Integrating Plyr into your own website

Note: if you're using Galaxie Blog, all that you need to do is upload your video and create the necessary XML Post Directives and Galaxie Blog will take care of the rest for you. This post is a technical how to article how I incorporated Plyr into Galaxie Blog.

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:

<head>
	<!-- Plyr (our HTML5 media player) -->
	<script src="/blog/common/libs/plyr/plyr.js">
	<!-- Defer the plyr css. -->
	<link rel="stylesheet" href="/blog/common/libs/plyr/plyr.css" />
 	</script >
</head>

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.

<div id="mediaplayer" class="mediaPlayer">
 	<video controls="" crossorigin="" playsinline="" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player1" class="lazy">
		<!-- Video files -->	
		<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720" />
		<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080" />
		<!-- Caption files -->
		<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default="" />
 	</video>
</div>

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.

<script type="deferjs">

	// Initialize the plyr.
	const players = Plyr.setup('video', { captions: { active: true } });
	// Expose player so it can be used from the console
	window.players = players;
</script>

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!