All About Video

by Justin Bodeutsch, Chris Ullyott | Last edited: 4/18/2012

Overview

The CMS allows users to upload video media to the Media library. Video files can be linked to, downloaded or played in a pop-up video player on the live site.

To support a wide audience of devices, the CMS will attempt to create FLV (Flash) versions of the video file upon uploading, so that embedded video players have both the original format and the Flash version to draw from as a fallback, in case one version is not supported.

Supported video formats

Recommended

Our most highly recommended video format is as follows:

  • Format: MP4
  • Audio encoding: AAC 
  • Video encoding: H.264 

CMS Media Library

All of the following formats are supported by the CMS and will be recognized as video files in the media library.

  • MPEG (.mpeg, .mpg, .m4v, .mp4)
  • ASF (.asf)
  • AVI (.avi)
  • H.264 (.h264)
  • MOV (.mov)
  • SWF (.swf)
  • WMV (.wmv)
  • XVID (.xvid)

Other formats can be uploaded, but won't be supported by CMS media players. They will appear as "documents" and can only be offered as downloads on the site.

Pop-up Media Player

A pop-up media player built with JW Player technology is available to play video files on your site. If you wish to use the pop-up media player to play videos, the files will need to be supported by both the CMS and the player also.

Currently, the video formats supported by both the CMS and the media player are the MP4 and FLV formats.

For complete JW Player technical specifications, see:
http://www.longtailvideo.com/players/jw-player/tech-specs/

Supported audio sample rates

To play correctly, the audio track in your videos will need to be formatted either in MP3 or AAC and encoded at one of these supported sample rates:

  • 11.025 kHz
  • 22.05 kHz
  • 44.1 kHz

Troubleshooting

If a video does not seem to play correctly on a particular device (desktop computer, tablet, mobile phone), there are essentially two steps to take:

  1. Verify that the video format is supported by the device.
    The format is the type of video file (example: MP4).
     
  2. Verify that the video encoding is supported by the device.
    The encoding is the method used to produce the video file (example: H.264).

Here are media requirements of some popular devices:

iPad
http://www.apple.com/ipad/specs/ 

iPhone
http://www.apple.com/iphone/specs.html 

Android
http://developer.android.com/guide/appendix/media-formats.html

Playing a video in the pop-up media player

The Monk pop-up media player, available for any site using MonkCMS/ Ekklesia 360, is a simple and effective HTML-5 compatible video player built with JW Player technology.

For technical specifications on the JW Player, see:
http://www.longtailvideo.com/players/jw-player/tech-specs/

The player can be used to play your videos in two ways.

Via links in media templates

If you have a media template that already uses video links (like the "Watch" links for Article or Sermon lists), there is no other step needed to setup the pop-up media player other than specifying the video in the Media options for the individual Article or Sermon record:

Media options

Via links within page content

You can also create a custom link to a pop-up video within page content. Select your text or image you wish to link to the video, then click the chain icon to create the link:

In the Link List dropdown of the Insert/edit link window, select the pop-up version of your video. Click "Insert" and the video will play in the pop-up media player when visitors click the link you created.

Embedding videos into a page

If you do not wish to play your videos in the pop-up player, there are other embeddable players available. For self-hosted video files (those uploaded to your media library), you can choose from several players available within the WYSIWYG content editor. For videos hosted on video services like Vimeo or YouTube, you can insert those videos via the HTML window.

Self-hosted video files

To embed a video file in a page using the WYSIWYG content editor, use the "Insert/edit embedded media" button.

The button will open a pop-up window like so. Select these most basic options in this first tab, "General".

  • Type: Selects the type of player which will be used to play the video file. Choose a player that will be compatible with your video file. For example, if you are using an MPEG file, use the QuickTime player. For Flash (FLV), use the Flash player. Each player behaves a bit differently, and will create different experiences for the end user.
  • File/URL: If you are using an external URL to your video file, enter it here. If you are using a video uploaded into your media library, use the List option.
  • List: This list shows all the video files currently in your media library. Choose the video format best suited for the player selected in Type. 
  • Dimensions: Sets the size of the video player. To be sure the video content is scaled to your player's dimensions appropriately, select your desired Scale in the "Advanced" tab.

Clicking Insert will embed your video onto the page.

Video embed codes

There are two ways to use video embed codes taken from a video hosting site:

  • Insert directly into HTML:
    To quickly insert a video embed code into a page, copy the embed code from the source. Then open the HTML view of your page, and paste in the embed code where you'd like the video to appear. 
    Note: You may need to modify the window mode if the player appears to float on top of all other elements on your page.
  • Associating via Media records:
    You can save media embed codes in the Media library by using the "Embed code" tab when creating a new media item. Media items that are embed codes can then be linked with content like Articles and Sermons by selecting the media item in the Media screen before publishing that content.

Videos in RSS feeds

RSS feeds like podcasts, article feeds or sermon feeds will include the video file itself. If an Article has both audio and video associated with it, two entries will be created with the audio listed first. If you need to make sure your podcast uses only the video file, you can specify that in the Outreach and Feeds modules.

Self-hosted vs. posted video

While it is possible to upload many video files to the media library in the CMS, consider your media storage needs over the long term. External media hosting services like Vimeo or YouTube can not only provide high storage capacities at low costs, but have several other benefits compared to hosting your own video files.

Benefits of using video services

  • Multiple devices supported (may depend on level of service)
  • Sharing buttons usually built into the player
  • Easy sharing over social media sites, via a link to the video itself
  • Automatic creation of the thumbnail image
  • Enhanced SEO (individual videos should appear in search results)

Benefits of self-hosting your videos

Nevertheless, there are several benefits to self-hosting your videos. A major benefit of self-hosting is that there are more options for customization, especially if a special video template were built for your site.

  • The possibility of a more customized experience (no ads, logos, or "related video" listings)
  • Social media sharing is optional
  • No waiting for a third-party service to process the video file
  • Potential to use custom thumbnail images
  • Visitors will come to your site to see the video

Recommended Resources

YouTube Embedded Players and Player Parameters
https://developers.google.com/youtube/player_parameters

Vimeo Player Documentation
http://vimeo.com/api/docs/player

Feedback

Was this resource helpful?