Stacks4Stacks

Video can add a lot of interest to websites. Services like YouTube, DailyMotion and Vimeo are the obvious choices for embedding video, but can have some drawbacks relating to the way video is handled and licensed. VideoPlayer is the ideal solution for taking back control of your video content and getting video quickly into your webpages through a gorgeous video player that shouts professionalism. No more ugly adverts, reduced video quality, questionable user privacy, overlays or branding with this solution! VideoPlayer was coded exclusively for RapidWeaver.

VideoPlayer started as a stack called Playr / VideoPlayr and was available from the StackManiac.com website. When Stacks4Stacks acquired StackManiac, it was brought to our attention that the original stack was broken. The stack was named to VideoPlayer and some quick updates were made (VideoPlayer version 1) to help elevate the worst of the bugs. Since then, VideoPlayer has been totally re-coded from scratch (version 2). This latest version is now far more reliable and uses a lot less code. A decent array of customisable style and colour settings are built into this stack. The video player user interface (controls) have been totally refreshed to bring the stack up to a modern standard.

VideoPlayer has been extensively tested and confirmed to work with IE9, IE10, IE11, Edge, and all newer versions of Safari, Chrome, Opera and Firefox. VideoPlayer works very well on newer Android smartphones and tablets; and even supports ChromeCast. Support for custom video controls on iOS is historically very poor, so VideoPlayer will display native video player controls on iOS. On screens less-than 568px wide, the volume and fullscreen controls are hidden to create more space for the remaining control interface components. A lot of cross-browser compatibility testing has been done, giving you the confidence that VideoPlayer will work reliably just about everywhere.

Example

This is a working example of the VideoPlayer stack using the default settings. In this example, the VideoPlayer stack was nested within a free UsefulStack to constrain its maximum width to 800px wide and to keep it centred on the page. The shadow effect is achieved using the free Shady stack:
 

 

Setup

Please follow these instructions for getting a single VideoPlayer stack configured within your RapidWeaver project:

1. Once installed into Stacks and RapidWeaver, open your Stacks library and drag-and-drop a copy of the VideoPlayer stack into your page
2. In the stack settings (shown in Stacks edit mode) choose ti use either a local or linked poster image to use
3. Link your MP4 and WebM versions of the video. More details about these two video file formats is discussed below
4. Change any of the player control settings, to suit your needs
5. Preview your webpage in RapidWeaver. Click the play button to make sure the video works. Export or publish your completed website when done.

Once you've got a single VideoPlayer setup and styled to your liking, then you can easily duplicate the VideoPlayer stack (to create multiple instances of it) or copy and paste the stack onto other webpages. Just change the poster and video file links for each instance of the stack. Of particular note, you can customise all aspects of the player colour scheme, so you can quickly setup this stack to match the colour scheme of your existing theme or corporate branding.

Poster images

The purpose of poster images is to display a static image while your video is loading. Commonly the poster image is a still frame (saved as a JPG) taken from the video, but you can use a different image or add text to the image if you want. The poster image should be the same dimensions and aspect ratio as your video. The easiest way to create a poster image is to open the video in Quicktime or VLC on your computer, and take a screenshot of a particular frame in the video. The JPG or PNG image can then be used as the poster image. Either drag and drop a suitable image into the stack settings or publish an image online first and link to it using the 'warehouse' option.

Video files

Your video will need to be saved into standard MP4 and WebM file format; before you add it to your RapidWeaver project or upload the video to a folder online. MP4 format is used by all mainstream web browsers and devices. WebM format is used by older web browsers that were not licensed to playback MP4 video (like some versions of Firefox). MP4 typically plays in all modern web browsers nowadays. However, providing the video in both formats guarantees the widest possible compatibility. You can easily generate both versions of your video using the free Handbrake or Miro Converter apps. Most RapidWeaver users find Miro Converter is the easiest tool to convert video into MP4 and WebM formats. As always, video files need web-safe file names; that means no spaces or special characters in the file names. The file must always end in a .mp4 or .webm file extension.

Storage of video files

Small video files of less than 5MB in size are normally okay to attach to RapidWeaver projects as resources. Bigger video files may cause stability or publishing problems in RapidWeaver, so these can be uploaded separately to a folder on your web server, using FTP software. Standard web hosting accounts may not always be the best place to store lots of very large video content, because normal web servers are not typically optimised for serving video (meaning video will be slow to play) and hosting companies may impose bandwidth or disk space limits. A CDN (content delivery network) like Amazon S3 will often prove more efficient and cost-effective in the long-term for distributing video. The webpage for Player stack has some details about creating a CDN for video files on Amazon S3. Video content being stored with a third-party (like YouTube or Vimeo) are not normally supported and alternative stacks exist for these already.

Multiple video on the same webpage

You can safely use multiple VideoPlayer stacks on the same webpage. It would be perfectly feasible to use an unlimited number of VideoPlayer stack to create a collage or gallery of video content. However the Preload option should be disabled to prevent overwhelming web browsers. Additionally it is recommended that you do not mix VideoPlayer stacks with other video stacks on the same webpage.

In instances where a user is still playing a video and then clicks onto another VideoPlayer stack, the previously playing video will be paused; if you've got the Pause On Outside Click option enabled in the VideoPlayer settings. This avoids the problem of multiple video files playing simultaneously.

Custom CSS code

VideoPlayer has been expertly designed to not only look professional, but to also promote excellent usability standards. For example, we've purposefully opted to use big buttons that make it much easier for your website users to click or tap on controls. Many style and colour options can be customised within the VideoPlayer settings. Additionally the stack has been coded to include many class selector names; and these will prove invaluable if you are proficient in CSS code and want to apply further styling.

Upgrading from Playr / VideoPlayr / VideoPlayer 1 to VideoPlayer 2

VideoPlayer 2 is an update to Playr / VideoPlayr and VideoPlayer 1. If you are still using one of the older stacks, then you should definitely consider updating to VideoPlayer 2. Older versions of Playr and VideoPlayer are no longer actively developed or supported. There are a number of bugs in Playr which may restrict your ability to successfully use the stack inside newer web browsers.

If you are using VideoPlayer 1, then you might be able update to VideoPlayer 2 using automatic updates inside Stacks / RapidWeaver. In this instance, video links will be preserved. Previous poster images are available when you set the source to local image. However some other settings may require configuring again before a republish of your webpages. Many new controller and style settings have been added in this recent free update. Aspects like templates have been removed, in favour of more colour scheme settings. VideoPlayer 2 is basically a whole new stack, so please bear this in mind before you commence an update and ensure everything is backed-up.