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.
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, 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.

Please note that VideoPlayer 2 now requires Stacks 3.0 or later and RapidWeaver 6.0 or later. This stack will not work with older versions of stacks or RapidWeaver. As always, please make use the FREE demo version provided, before committing to a purchase of VideoPlayer. Old versions are available from the archive page.

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:
 
00:00  /  00:00
 

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 Firefox, Opera and certain other specialist or minority web browsers. Providing the video in both formats guarantees the widest possible compatibility. You can easily generate both versions of your video using the free Handbrake app. As always, video files need web-safe file names; that is to mean no spaces or special characters in the file names.

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.

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 a free 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. Please gou can get in contact with proof of purchase if you require a free coupon code for VideoPlayer 2.

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.
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.