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.

 

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.

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. 

Embedding YouTube videos using Galaxie Blog 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.