Gregory's Blog

Upload and host your own videos with Galaxie Blog


You can upload and host your own local videos in your blog posts with Galaxie Blog.

Galaxie blog allows you to upload and play your own videos. Your video will be placed at the top of the blog post and will capture your readers' attention.

This interface will also allow you to create closed captions (CC) on top of your video using a WebVTT File, and to cover your initial video with an optional image.

To upload a video that will be made at the top of your blog post, log into the administration site, find your post and open the Edit Post Interface, click on the Enclosure Editor, and click on the image of the camera that is labeled 'upload video', alternatively, you can select Insert - Upload Video using the Enclosure Editor.

 

Make sure that your videos are compressed, especially when you are using a hosting provider. The images will fail to upload if they exceed the server's upload settings.

You can drag and drop an HTML5 video on top of the upload video interface, select a video from your system, or use your camera. If you are browsing for a file only valid HTML5 video formats will be shown.

  • The uploader should provide a preview of the video with the name of the file.
  • You can add the video title by clicking on the pencil icon underneath the video. 
  • If you chose the wrong file, click on the x icon on the video to remove it and choose another video. 

If everything looks good, click on the Upload File button below.

Once the video has been uploaded, a message will be displayed notifying you that you can add closed captions and create video image covers. After closing the dialog a video preview of your video will appear.

 

Adding closed captions to your new video

Closed captions may be added to videos that you have uploaded by uploading a WebVtt file. 

A web VTT file is a simple text file and is easily constructed. It looks something like this:

WEBVTT - This file has cues.

14
00:01:14.815 --> 00:01:18.114
- More folks need to like Galaxie Blog on Gregory's git hub project.

15
00:01:18.171 --> 00:01:20.991
- Its an awesome project

16
00:01:21.058 --> 00:01:23.868
- [ pleading ]
- Please like my project!

Now that this little screed has been made, let's go through the steps to create your closed captions.

Before processing, check to see if your web server needs to have support for the following mime type: text/vtt. Consult your web server administrator for more information.

  1. Create your web VTT file using a text editor. 
  2. Save the file with a .vtt extension.
  3. Click on the CC icon labeled Upload WebVtt File, or click on Insert - Upload WebVTT file.
  4. A WebVTT Editor will be pulled up.

Once the Web VTT Editor is displayed:

  1. Click on the arrow icon to upload the VTT file that you have saved.
  2. Another uploader interface will be shown.
  3. Drag or drop the WebVTT file on top of the new interface, or use the finder to select the WebVTT file.
  4. Click on the upload button.
 

Adding an image to cover the initial video

The video image cover will cover the video in its initial state and disappear when the video is being displayed.

To add a video image cover:

  1. Click on the Upload Image Cover icon in the Enclosure Editor, or choose Insert - Upload image cover,
  2. A new Insert/Edit Image interface will be pulled up. Here, there is only one 'Insert/Edit Image icon to upload your image cover. 
  3. Either upload a new image or specify the external URL to the image that you want to serve as the video cover.
  4. If you are uploading, select the image that you want as the image cover and click on the submit button.
  5. Your video should be previewed with your new image covering the video.
 

 

 

 

 

 

This entry was posted on May 3, 2022 at 12:07 PM and has received 34 views.

Integrating your own hosted videos using Galaxie Blog Directives


Create responsive videos with your own hosted content with Galaxie Blog Directives

It is recommended to use the media interfaces in the post editor, however, you can also embed responsive videos using Galaxie Blog Directives.

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, upload your videos using an FTP client.

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.

If you want the videos to be optimized for different client devices, just like responsive images, you can use up to three videos of 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 enter the proper URL xml post directives into the Post Header interface.

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.

This entry was posted on April 22, 2022 at 12:10 AM and has received 771 views.

Embedding a Video from Vimeo using Galaxie Blog Directives



Embedding Vimeo videos using Galaxie Blog Directives.

Note: it's recommended that you use the media interface in the post editor to insert Vimeo videos. However, you can also use Galaxie Blog Directives.

To embed a Vimeo video into the enclosure using a Galaxie Blog Directive, simply grab the video Id from Vimeo, and copy and paste the URL into the Post Header editor like so:

<vimeoVideoId>343068761</vimeoVideoId>

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

This entry was posted on April 21, 2022 at 11:02 PM and has received 695 views.

Embedding a video from YouTube using Galaxie Blog Video Directives



While it is recommended to insert YouTube videos with the media editor, you can also embed YouTube videos with Galaxie Blog Directives.

I intend to use the capabilities of the Galaxie Blog Directives in a new markdown editor that I will incorporate in a future version. Additionally, the video directives provide backward compatibility with previous versions of Galaxie blog. 

To embed a YouTube URL to the enclosure, simply grab the video URL from YouTube, and copy and paste the URL into the YouTube URL xml post directive into the Post Header interface: 

<youTubeUrl>https://www.youtube.com=watch?v=LXt-hDDiEAQ&feature=youtu.be</youTubeUrl>

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 YouTube at https://www.youtube.com/watch?v=LXt-hDDiEAQ&feature=youtu.be

This entry was posted on April 21, 2022 at 10:12 PM and has received 860 views.

Plyr Themes now match Galaxie Blog's Kendo UI themes


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 its own media player into its 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!

This entry was posted on November 19, 2019 at 8:07 PM and has received 667 views.




Footer Logo

Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Galaxie Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.

Credits:

Portions of Galaxie Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site.

Version:

Galaxie Blog Version 3.0 RC (Toby's Edition) April 15th 2022 Blue Wave Dark theme