Thanks! Please check the following:
System requirements
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with.

License agreement
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
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.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.