How to integrate your own video content to Galaxie Blog

Galaxie Blog supports the following video types: .mp3 , .mp4, .ogg, .ogv and .webm. If you have the video in another legacy format, you'll need to convert it to a modern format to play it in Galaxie Blog.

If you have a supported video format, you can either upload the video by clicking on the Add Enclosure, or by using the file uploader in the Galaxie Blog administrative interface. However, the Add Enclosure method will only work if the video is smaller than around 3MB.. You can use your own FTP tools to upload the video if that is what you prefer.

You can also host videos that are stored on a different server, but you'll need to specify the cross-origin true argument using a Galaxie Blog Post Directive.

Though completely optional, if you want the video's to be optimized for different client devices, just like responsive images, you can use up to three videos with different sizes. Galaxie Blog supports 576p, 720p, and High Definition 1080p video formats.

Once you have the video(s) on a server, you will need to use the proper URL xml post directives

The following Galaxie Blog Post XML Directives were used to play the video that you see on top of this blog post.

• The videoType directive is necessary. Here I set it to ".mp4"
• The videoPosterImageUrl directive completely optional. This is used to 'cover' the video with an image until it is played. I used an image of the video to cover the video and specified the URL.
• Since my video format is 720p, I used the mediumVideoSourceUrl directive.
• You can use one argument, two, or all three to have a responsive video. You will need at least one argument for the video to play
• Use smallVideoSourceUrl for 576p
• Use mediumVideoSourceUrl for 720p
• Use largeVideoSourceUrl for 1080p
• Or use all three arguments if you want the video to be responsive
• This video is hosted on the same domain, so I used false for the cross-origin argument. If you are integrating a video that is hosted on another server, set the videoCrossOrigin to true.

This snippet of code will initialize our Plyr and it will play the video file within Galaxie Blog. The video will be lazy loaded, and will only load once the page loads and the video is downloaded to the client.

As with all Galaxie Blog video's, the video will automatically play when your looking at an individual post, and requires the user to click on the play button when your looking at the post from the main blog page. You can easily change this behavior by editing the code, or by making a suggestion here.

Note: the xml post directives will be deprecated in a later version

It is trivial to embed a video in your blog post from Vimeo using Galaxie Blog.

Simply grab the video Id from Vimeo, and copy and paste the id into the vimeo video xml post directive like so:

This snippet of code will initialize our Plyr and it will play the vimeo video file within Galaxie Blog. The video will be lazy loaded, and will only load once the page loads and the video is downloaded to the client.

As with all Galaxie Blog video's, the video will automatically play when your looking at an individual post, and requires the user to click on the play button when your looking at the post from the main blog page. You can easily change this behavior by editing the code, or by making a suggestion here.

Note: the xml post directives will be deprecated in a later version

Just like Vimeo, you can embed a YouTube video easily with Galaxie Blog.

Simply grab the video URL from YouTube, and copy and paste the URL into the YouTube URL xml post directive like so:

This snippet of code will initialize our Plyr and it will play the YouTube video file within Galaxie Blog. The video will be lazy loaded, and will only load once the page loads and the video is downloaded to the client.

This video is an amazing performance by Chris Botti and Carolyn Campbell playing Kashmir to the violin. The video source is from You Tube at https://www.youtube.com/watch?v=LXt-hDDiEAQ&feature=youtu.be.

As with all Galaxie Blog video's, the video will automatically play when your looking at an individual post, and requires the user to click on the play button when your looking at the post from the main blog page. You can easily change this behavior by editing the code, or by making a suggestion here.

Note: the xml post directives will be deprecated in a later version

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

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:

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.