Gregory's Blog

Playing your own video content with Galaxie Blog


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

This entry was posted on December 16, 2019 at 1:32 PM and has received 387 views.

Embedding a Video from Vimeo in Galaxie Blog


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:

view plain about
1<postData>
2<vimeoVideoId:343068761></vimeoVideoId>
3</postData>

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

This entry was posted on December 15, 2019 at 9:02 PM and has received 333 views.

Embedding a video from YouTube in Galaxie Blog


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.

view plain about
1<postData>
2<youTubeUrl:https://www.youtube.com/watch?v=LXt-hDDiEAQ&feature=youtu.be></youTubeUrl>
3</postData>

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

This entry was posted on December 15, 2019 at 8:12 PM and has received 400 views.

Galaxie Blog XML Post Directives


Background

For those who don't know, Galaxie Blog was built on top of BlogCfc, one of the most popular ColdFusion Blog engines around. However, BlogCfc was originally built in the early 2000's.

Raymond Camden, the author of BlogCfc, used .ini files to store a lot of variable settings. It was a decent approach as the blog software in those days was much simpler. It is easier to store dynamic information in the .ini files rather than the database as BlogCfc supported SQL Server, MySql, Oracle and Access.

I also put quite a bit of information into the .ini files. In fact, I have nearly 500 different variables stuffed into the .ini files as putting it into a database was cumbersome as a lot of extra code and testing was required to support all of the databases.

However, using the .ini files to store a large amount of data is quite inefficient and slow.

After releasing version 1.15, I put a freeze on using any new settings into the .ini files. It was just too inefficient. It is my plan to wait until I get ColdFusion ORM up and running, and until then, I am either hardcoding some of the new variable information, and expanded on the existing BlogCfc XML Post Directives that I put in a Blog post.

What is a Galaxie Blog XML Post Directive?

BlogCfc used what I call a XML Post Directive to deliver certain functionality to a given blog post, such as wrapping a code block with <code> tags to present code. BlogCfc also used the <more/> tag to condense a post on the main site that aborted the page at a certain position and created a button that navigates the reader to the full post.

Since Galaxie Blog 1.15, I used a handful of additional XML Post Directives to embed optional meta tag information, such as embedding video, and to bypass ColdFusions' Global Script Protection that is used by my hosting provider. Once I integrate ORM, I'll eventually use an interface and code editor to do this without the XML Post Directives, but in the meantime I am using this approach.

Note: all of these directives are optional and only needed for certain occasions, such as including a video, to present video or code, and to bypass ColdFusions' Global Script Protection that is used by various ColdFusion hosting providers.

Original BlogCfc XML Post Directives

  • Use <code> tags to format programming code:
    1. Create the initial <code> tag.
    2. Insert the actual code
    3. Terminate your code block with </code>
  • Use a single <more/> tag to condense the blog body when you're looking at all of the blog posts:
    • Place a <more/> tag where you want the body to terminate
  • Real world example: Scoll down to Kendo Server Side Validation

SEO XML Post Directives

  • Set the meta title for the individual blog post:
    • Enter the title after titleMetaTag: string:
    • <titleMetaTag:Galaxie Blog Post Directives>
    • Terminate the tag with a closing </titleMetaTag>
  • Set the description for the individual blog post. This also sets the description when sharing the post on social media sites (i.e. the open graph and twitter meta tags):
    • Enter the description after descMetaTag: string:
    • <descMetaTag:How to use post directives in Galaxie Blog>
    • Terminate the tag with a closing </descMetaTag>

Image XML Post Directives

  • Set the image URL for Facebook (i.e. sets the value for the og:image):
    • Note: if you upload an enclosure when making a post, Facebook and Twitter images will be automatically created for you.
    • Enter the URL after facebookImageUrlMetaData: string:
    • <facebookImageUrlMetaData:/enclosures/facebook/aspectRatio.jpg>
    • Terminate the tag with a closing </facebookImageUrlMetaData>
  • Set the image URL for Twitter (i.e. sets the value for the twitter:image):
    • Note: if you upload an enclosure when making a post, Facebook and Twitter images will be automatically created for you.
    • Enter the URL after twitterImageUrlMetaData: string:
    • <twitterImageUrlMetaData:/enclosures/facebook/aspectRatio.jpg>
    • Terminate the tag with a closing </twitterImageUrlMetaData>

Video XML Post Directives

  • Set the video type. When the proper video type is encountered, the media player will attempt to play the video:
    • The videoType can be: .mp3, .mp4, .ogg .ogv or .webm
    • Specify the video type after videoType: string:
    • <videoType:.mp4>
    • Terminate the tag with a closing </videoType>
  • Set a cover image on top of the video if is not playing (optional):
    • Specify the URL to the cover image after videoPosterImageUrl: string:
    • <videoPosterImageUrl:https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg>
    • Terminate the tag with a closing </videoPosterImageUrl>
  • Set the URL to the small source (576p) of a video (optional):
    • It's possible to have a small, medium and a large video source. The code will determine which video source to play depending upon the end users device type (i.e. desktop or mobile). The large video source should be in 576p format.
    • Specify the URL to the medium sized video after smallVideoSourceUrl: string:
    • <smallVideoSourceUrl:https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4>
    • Terminate the tag with a closing </smallVideoSourceUrl>
  • Set the URL to the medium source (720p) of a video (optional):
    • It's possible to have a small, medium and a large video source. The code will determine which video source to play depending upon the end users device type (i.e. desktop or mobile). The large video source should be in 720p format.
    • Specify the URL to the medium sized video after mediumVideoSourceUrl: string:
    • <mediumVideoSourceUrl:https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4>
    • Terminate the tag with a closing </mediumVideoSourceUrl>
  • Set the URL to the large source (1080p) of a video (optional):
    • It's possible to have a small, medium and a large video source. The code will determine which video source to play depending upon the end users device type (i.e. desktop or mobile). The large video source should be in 1080p format.
    • Specify the URL to the medium sized video after largeVideoSourceUrl: string:
    • <largeVideoSourceUrl:https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4>
    • Terminate the tag with a closing </largeVideoSourceUrl>
  • Set the URL to the video captions file (optional):
    • Specify the URL to video captions VTT file after the videoCaptionsUrl: string:
    • <videoCaptionsUrl:https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt>
    • Terminate the tag with a closing </videoCaptionsUrl>
  • Set the cross origin setting (optional):
    • This is an optional setting that only should be set when the video source is outside of your domain. Set to true only when the video is hosted from another source.
    • Specify the URL to video captions VTT file after the videoCrossOrigin: string:
    • <videoCrossOrigin:true>
    • Terminate the tag with a closing </videoCrossOrigin>
  • Set the video width meta data (optional):
    • This is an optional setting that sets the width in the meta tags. It does not impact the presentation of the video and is only used by Facebook and Twitter.
    • Specify the width in pixels after the videoWidthMetaData: string:
    • <videoWidthMetaData:1920>
    • Terminate the tag with a closing </videoWidthMetaData>
  • Set the video height meta data (optional):
    • This is an optional setting that sets the height in the meta tags. It does not impact the presentation of the video and is only used by Facebook and Twitter.
    • Specify the width in pixels after the videoHeightMetaData: string:
    • <videoHeightMetaData:1080>
    • Terminate the tag with a closing </videoHeightMetaData>

XML Post Directive for YouTube

  • Set the URL to a YouTube Video:
    • Specify the YouTube full URL after the youTubeUrl: string:
    • <youTubeUrl:https://www.youtube.com/watch?v=liJqpsjai9I&feature=youtu.be>
    • Terminate the tag with a closing </youTubeUrl>

XML Post Directive for Vimeo

  • Set the ID to play a video from Vimeo:

XML Post Directives to bypass ColdFusions' Global Script Protection

  • Use a cfinclude:
    • Enter the path to the template that you want to include after the <cfincludeTemplate: string:
    • <cfincludeTemplate:/blog/includes/postContent/parallax/parallaxScript.cfm></cfincludeTemplate>
  • Include a javascript inside of a post
    1. Use the initial attachScript, and place the optional script type, if necessary, after attachScript string within a blog post like so:
    2. <attachScript>
    3. Copy and paste the actual javascript
    4. alert("Hello World");
    5. And terminate the script with </attachScript>:
    6. </attachScript>

This entry was posted on December 14, 2019 at 2:14 PM and has received 319 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. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.

Version:

Galaxie Blog Version 1.50 November 22 2019