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.
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:- Once installed into Stacks and RapidWeaver, open your stacks library and drag and drop a copy of LitePlayer into your page
- In the stack settings on the right, configure the links to your MP4 and WebM video files (more details documented below about these)
- The aspect ratio setting can be amended if required, together with any other general settings
- Adjust the play button and pause button styling accordingly. There are many options to customise their appearance
- If your RapidWeaver theme lacks support for Font Awesome Icons, check the Font Awesome Icons option in the Advanced Settings
- 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.
