As you'd expect, LitePlayer is fully responsive and compatible with a large number of web browsers and devices. This stack has been developed exclusively for RapidWeaver and is ideal for both novice and expert users alike, seeking to get a simple video player on a webpage with minimal fuss.

Why use LitePlayer? Traditionally you can already build a chromeless-style video player; by making use of HTML5 video tags, autoplay and control attributes. However as many of your website users will tell you, autoplaying content is a source of major annoyance. Autoplaying is not supported on a growing number of web browsers; for the all the reasons that autoplaying video is bad. So if you've hidden your video controls (to build your chromeless player); suddenly a lot of people landing on your website (using a browser without autoplay support) are going to stuck in a tricky position of not being able to click a button to play your video!

With LitePlayer, we've engineered a new video player that promotes excellent usability standards. For starters, we do not autoplay anything by default. We instead present website users with an attractive custom 'play' button, to manually initiate the playing of video content themselves. To circumvent the issue of custom player buttons not being supported on iOS devices, we detect these devices and reinstate the original default web browser video controls. On normal computers when a video is playing, the 'play' button is hidden from view and a more discrete 'pause' button is displayed below the video. The idea of moving the pause button down to below the video is simply so that is does not obscure the playing video. When the video has finished playing, the buttons and static poster image are automatically restored.

LitePlayer is designed and developed as a very simple video stack. Therefore we've purposefully omitted skip, replay, volume, progress bars and timing controls to create this beautifully minimalist video player. Obviously if you do what to present your website users with more video controls, then the popular Player stack is a worthy contender instead. Or you can enable native browser controls in the stack settings. LitePlayer is compatible with both Stacks 2 and Stacks 3.

Example

This is a working example of the LitePlayer stack. The sample video used is courtesy of Big Buck Bunny (by Blender Foundation) released under the Creative Commons license.
 
 

Setup

Follow these instructions for getting LitePlayer working in your RapidWeaver website:
  1. Once installed into Stacks and RapidWeaver, open your stacks library and drag and drop a copy of LitePlayer into your page
  2. In the stack settings on the right, configure the links to your MP4 and WebM video files (more details documented below about these)
  3. The aspect ratio setting can be amended if required, together with any other general settings
  4. Adjust the play button and pause button styling accordingly. There are many options to customise their appearance
  5. If your RapidWeaver theme lacks support for Font Awesome Icons, check the Font Awesome Icons option in the Advanced Settings
  6. Preview your webpage to test the video. Publish when done.

LitePlayer imposes no limits on the duration of the video files you embed. This stack can confidently handle content a couple or seconds long or full-length, HD films and documentaries. If you click anywhere outside of the LitePlayer stack, the video automatically pauses; so you can safely use multiple LitePlayer stacks on the same webpage.

Video formats and storage

It is essential to provide two copies of the same video; one in MP4 format and a second in WebM format. If you fail to provide the video in both formats, there's a good chance the video will fail to play in some web browsers. MP4 is the preferred format of all mainstream commercial web browsers; whereas WebM is the preferred format of opensource web browsers, like Firefox and Opera. When given a choice, a web browser will choose which it prefers to play. You can download and use the free Handbrake app; which is simple and fast for preparing video content for the web.

Video files of less-than 5MB are normally okay to add to RapidWeaver as resources. However video files greater-than 5MB are likely to make RapidWeaver unstable and significantly increase publishing times. Generally it is recommended that all video files are published separately to your web server or another online storage location (like Amazon S3). Large video files of should nearly always be hosted appropriately on a cloud server, like Amazon S3.

If you are finding that video files are downloading instead of playing in LitePlayer, this indicates that your web hosting company (where the video file is stored) may have misconfigured the MIME types. This means that when a web browser requests the video file from the server, it gets a download signal instead. This can especially be a problem with Firefox and WebM files on some providers. If these sorts of issues arise, you should definitely make contact with your hosting provider and ask them to setup the MIME types properly for your MP4 and WebM files. Some web hosts also let you edit MIME types directly in your CPanel.

Poster images

There are slight variations in how different web browsers handle poster images, but for the most part these are static images displayed before the video is played. For best results use a poster image that is saved in JPG format at 72 dpi. The poster image should be equal in size to your video. So for a 1080p video, a poster image measuring 1920 × 1080 pixels would work best. The smaller the image file size, the quicker the image will load. When the video has stopped playing, the poster image is displayed again. You can create a poster image using a still frame from your video or create a custom one in your favourite graphics software.

Aspect ratio

Nearly all video editing software (including both free and commercial software) outputs video in 16:9 aspect ratio. There is an aspect ratio option in the LitePlayer settings that can be changed if your video is something other than 16:9. Older video might be 4:3 ratio, for example. Setting the correct aspect ratio with ensure the poster image and video will be scaled to the correct proportions; to fit different screen sizes. If you are creating video in a non-standard size (like a long letter-box shaped video for the top of a webpage banner) you may need to use the Custom option instead.

Embedding video into ExtraContent and FreeStyle containers

In the advanced settings, you can change the Video Placement option. By default, the video will just get rendered in the normal page flow (wherever you have placed the stack). However the options exist to move the LiteVideo stack into another part of the page; like a theme ExtraContent container or a FreeStyle banner. The advantage of using these settings is simply that it helps reduce the number of different stacks you need on the page and keeps your workspace more tidy.

Multiple LitePlayer stacks on the same page

You can safely use multiple LitePlayer stacks on the same page. However we recommend the Pause On Outside Click option is checked in the Advanced Settings. This function will listen for a mouse click or tap event to take place outside of the video container. The video will then get paused and the buttons toggled. This is a good, simple system to prevent the possible issue of multiple video's playing simultaneously by accident; including other audio or video content not inside LitePlayer stacks.