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.

Player delivers the features that no other audio or video player for RapidWeaver does. If you're serious about producing and hosting your own quality audio or video content in a website, then this is very much a stack to give serious consideration towards using. With Player, we went right back to the basics and engineered a modern and future-proof HTML5 media player. The whole thing has been built exclusively for RapidWeaver and not simply copied from existing plugins! The end result is this fast, reliable and lightweight HTML5 media stack. Player is straightforward to get working in a website; but equally one which gives unmatched flexibility and customisability. Visitors to your website will love the ease at which they can playback your media on a variety of web browsers and devices.

Key features

Player stack has many features, some of which are highlighted here...
  • A single stack element which lets you toggle between an audio or video file (think of it as two stacks in one)
  • Adjust exactly what media controls to display below the player and change the order your controls should be shown in
  • Easily customise the player to match your existing RapidWeaver theme or corporate branding. Change both sizing and colours with ease
  • Full caption and subtitle support, for better website accessibility, SEO and excellent multilingual support
  • Ability to have the Player stack open at fullscreen in newer web browsers, like Chrome, Firefox and Safari
  • Redirect users at the end of an audio or video file, onto other web pages or signup forms etc.
  • Player scales responsively on desktop, tablet and mobile web browsers
  • Connect your Player stack to Google Analytics to see how many people played the audio or video file
  • Option to have the player control bar automatically hide and reveal on mouseover
  • Ability to setup multiple Player stacks on the same page, without any nasty conflicts occurring
  • A blank placeholder below the Player stack for comment stacks, social networking icons, supplementary content, downloads or detailed descriptions
  • Future support for 4K video content and retina display screens
  • Potential scope to further modify the Player stack with custom CSS code or different icons
  • Save customised Player stacks as 'user stacks' for instant reuse in other pages or projects

Why use the Player stack?

There are several reasons to consider using the Player stack, over other audio and video solutions for RapidWeaver...
  • You have complete control over the length, format and quality of your media content. Player stack will not 're-process' or convert media after publication. What you put in is what you get out! The quality or length of your media will not be compromised.
  • With practice, Player stack is very fast to setup. Player will sit comfortably within the existing workflow; making it ideal for established musicians, broadcasters and filmmakers to use, plus many others. Unlike many audio and video sharing websites, you will not have to wait hours for your media content to become available for others to view online.
  • Media players in websites often all look the same, and this can start to look pretty cheap and amateurish. Player stack gives you an unmatched degree of customisability, so you can build completely unique audio and video players with exactly the controls you want.
  • Player stack is ideal for various projects, including podcasts, promotional video's, audio samples, portfolios, media archives, online learning and marketing; to name a few.
  • Setup custom goals and events in software like Google Analytics to count how many people play your media and measure other parameters, which are not normally feasible with Flash or iFramed content.
  • No popups, subscription payments, advertising or competing related content. Player is very much a stack you can buy once and use hundreds of times in your personal and commercial RapidWeaver projects.

So for kitten video's, services like YouTube and Vimeo are perfect! In actual fact, these services are still ideal if you just need to get basic audio or video content out into the public domain. But for professional audio or video content, the 'self-hosted' approach will always prevail for many. And this is exactly what the Player stack specialises in supporting. With this stack, we have focused hard to develop a modern, cross-browser compatible HTML5 audio and video player, which will look perfect in any RapidWeaver website, work beautifully and convey professionalism.

Examples

Here are some real working examples of the Player stack in action. Each was setup inside a free responsive AdaptiveGrid stack, but ordinarily you can place Player stacks directly on a page. Because a number of Player stacks have been used on this single webpage, preloading has been disabled. Hence, the duration of the audio or video files shows as '00:00' and there may be a delay of several seconds between clicking the play button and the audio or video sample playing. Rest assured under normal circumstances, you can enable auto preloading; whereby the web browser will start downloading the audio or video file as the page loads and it will be available for immediate playback.
00:00
00:00

Audio

We'll start with the basics and a simple Audio file. Player will allow you to embed a single audio file in each Player stack. In this quick audio example, we took a few of the controls out which were surplus, and changed some of the others around. Player will simultaneously serve both MP3 and Ogg audio formats, for the best possible web browser compatibility. The aspect ratio was set to 1080p and a warehoused poster image measuring 1080px wide and 608px tall was added. The poster image is displayed above the control bar, and is ideal for displaying a static image, like album artwork.
Song Name Goes Here Like This - Artist Name
  00:00
Song Name Goes Here Like This - Artist Name
  00:00
Song Name Goes Here Like This - Artist Name
  00:00
Song Name Goes Here Like This - Artist Name
  00:00
Song Name Goes Here Like This - Artist Name
  00:00

Audio playlist

Player stack does not have support for true playlists as such (the emphasis of this stack is on speed, efficiency and easy of use). However by turning off poster images and setting the aspect ratio to 0% in the stack settings, you can create an extra slim player, comprising of a horizontal control bar only. Each Player stack will link to a single audio file. You can use additional stacks to include titles, artwork, borders or descriptions about each audio track.

A special mechanism is built into the Player stack, ensuring that only a single HTML5 audio or video file with play on the page, at any one time. This avoids the common problem of multiple audio or video files playing simultaneously.

It would also be possible to include 'Buy Now' or 'Add To Cart' links in the Player control bar, so that visitors to your website can preview and buy audio or video direct from you.
00:00
00:00

Default settings

This example uses the default settings for the Player stack. Very little has been changed in this example. Only a few essentials have been adjusted, to pull the video files into the page, hide the captions button, setup a download link and provide a custom poster image. All other settings have been preserved.

By default, the Player stack has a neutral grey and white colour scheme. However this can be easily modified in the stack settings, to match your RapidWeaver theme or corporate branding colour scheme. A clear advantage of using the Player stack over other audio and video solution for RapidWeaver is that you're not tied to a limited selection of 'skins'. You can very much design and deploy your own style of audio or video player.
Play

No control bar

You don't need to display a control bar, as this example illustrates. The Player stack can be configured without a control bar and a single 'splash' play button in the middle. This sort of configuration would be ideal for theme headers and banner regions, in a page.

Additionally it's possible to switch-off the splash play button and have the video automatically start on page load (without user intervention).

The Player stack can be used in non-Stack page types, like a styled text, HTML code or contact form page. The easiest way to achieve this is by using the PlusKit plugin (not included) and the powerful @import function. Player stack also includes a 'mini API', allowing you to build your own control buttons elsewhere on a page.

00:00
00:00

Hidden control bar

In this instance, the control bar only shows on desktop web browsers when you mouseover the Player stack (the control bar is still permanently shown on touch devices which do not have support for hover gestures). CSS3 transitions are used to provide a subtle ease-in and ease-out animation effect. This Player stack was configured by simply enabling the Auto Hide option in the stack settings. Some clever code is used to measure the height of your control bar and calculate its shown and hidden positioning.

Hidden control bars are a good idea if you're aiming towards a very minimalist video player, but you still want to give viewers the ability to perform various tasks.
   00:00 / 00:00   

YouTube style

In this example, we've changed some settings to create a red and black YouTube-style video player. Some surplus buttons were deleted from the control bar, to create a more minimalist video player. The full screen button was given some inline CSS of style="float:right;", to float it over onto the righthand side of the control bar. Additionally, the scrubber bar was set to 100% wide, positioned above the control bar (using the built-in settings).

Player stacks like this one can be saved as 'user stacks', meaning that you can quickly clone Player stacks into into other pages or projects. This saves the hassle of needing to reconfigure things every time! Player stack has been engineered so that all customisable settings will be preserved, if you save it as a user stack.
00:00
00:00

Flat, semi-transparent

There are almost infinite possibilities to customise the appearance of your Player stacks. This is of key importance if you want a media player that looks like it was built as part of the website, rather than something hastily dumped into the page!

In this example we switched on the Overlay option in the stack settings. The opacity of the controller bar was reduced down to 80%. The colour scheme of the controller bar fill, buttons, static text and scrubber bar was also changed in this example. Rounded corners were removed from the scrubber bar.
00:00
00:00

Heads-up display

Another illustration of the almost infinite customisable options available with this powerful stack. In this instance, the control bar was set to overlay. The control bar horizontal margin was set to 20% and the vertical margin was set to 5%. Rounded corners were set to 15px. The Player control bar was again customised with a unique colour scheme and it's height was increased to 50px.

The end result is this very modern and retina-compatible control bar that gives the illusion of floating over the poster image or video behind. This style of Player stack would not look out of place in any contemporary website and is very inviting for people to interact with.
Play

Play and redirect

Wouldn't it be great if a person could watch a video and then get redirected onto another page or website at the end? This is very much something the Player stack supports straight out of the box. This type of functionality would be fantastic in numerous instances; such as promoting pre-release products or services, and then redirecting the viewer to another page where they can register their interest or view a product.

In this example, a short video is played (the video is 28 seconds long). When the video ends, you will get redirected to http://example.com.

This functionality is achieved by enabling the Redirect setting in the stack options, and then providing the URL you want to redirect to when the audio or video has finished playing. Although the redirect system is generally considered very reliable, there may be odd corner-case examples where it does not always work. Therefore it's wise to still include a 'fall back' link to the side or under the video. Links will open in the same window or tab, to limit confusion.
00:00
00:00
  • Off
  • Journey Description

Captions

This example embeds a much longer video, compared with the other examples above (over 18 minutes long) and also has subtitle support. Click the 'A' icon in the control bar to access the text track menu and toggle subtitles on or off. The download button in the toolbar will download the WebVTT file, used for the captioning of this video.

Captions are currently fully supported in newer versions of Safari, Firefox, Chrome and Opera web browsers. Unfortunately although IE10 and IE11 claim to have support captions, the reality is that full implementation is yet to be completed; with support for text tracks not being extended outside of Windows Media Player yet. Microsoft claims this is something "being worked on" and will be improved in future updates.

The Player stack has support for up-to 5 separate text tracks, per audio or video file. These can be setup in the stack settings, without needing to modify any code. Captions are displayed over the poster images of audio and are layered over video's.

Captions and subtitles are of fantastic benefit in just about any video, and their setup is fully documented below. There is growing evidence to suggest that search engines are taking an interest to supplementary content, such as captions and subtitles, when indexing websites. Presumably because if gives extra information about an audio or video file, which can't otherwise be extracted.



Setup

Follow these instructions (in this order) to get a basic Player stack working in your webpage:
  1. Once the Player stack has been installed, drag and drop a copy of Player from your Stacks library into the webpage.
  2. In the settings on the right, give the Player stack a unique ID. This serves various purposes. An ID can be anything you like, except it must not start with a number, nor contain spaces or special characters.
  3. Below the ID box in the stack settings, toggle between embedding either an audio or video file
  4. Set the links to your audio or video file. See the details below on conversion tools and the best file formats to use
  5. Adjust the aspect ratio of the Player stack. This helps to ensure your Player stack will scale responsively within the webpage, at different screen sizes
  6. Optionally you can provide a poster image in the stack settings. See the information below if you are not sure what this is.
  7. Customise any of the other behavioural, style or colour settings. Turn-off things like the splash play button or captions if they are not needed
  8. Double-clicking the control bar in stacks edit mode allows you to remove controls or change their order, from left to right.
  9. Preview the page in RapidWeaver to see how things look and work!

Preparing your media for the web

Much the same as any HTML5 media player, video files need to be available in both MP4 (.mov) and WebM formats. Audio files need to be available in MP3 and Ogg formats. Providing content in these pairs of formats ensures excellent compatibility with all major commercial and open source web browsers. Each of these media formats is listed in the Player stack source code. A web browser can then choose which favourite format to play, based on compatibility. Don't waste time and money on conversion software! The free Handbrake app is absolutely perfect for converting your media into web safe formats with drag-and-drop ease and efficiency. This is compatible with different platforms, and you can use the following settings to prepare your media:

Media Format Miro Conversion Instructions
Audio - MP3 Launch Miro Converter, drag and drop your audio file into the well shown. From the Format menu, choose Audio and then select MP3. Click the Convert button to convert and save the audio file. Upload this converted file to your web server or warehouse.
Audio - Ogg Launch Miro Converter, drag and drop your audio file into the well shown. From the Format menu, choose Audio and then select Ogg. Click the Convert button to convert and save the audio file. Upload this converted file to your web server or warehouse.
Video - MP4* Launch Miro Converter, drag and drop your video file into the well shown. From the Apple menu, select Apple Universal. Click the Convert button to convert and save the video file. Upload this converted file to your web server or warehouse. Conversion of video files may take a long time to complete.
Video - WebM Launch Miro Converter, drag and drop your video file into the well shown. From the Format menu, choose the Video option and then click on WebM HD. Click the Convert button to convert and save the video file. Upload this converted file to your web server or warehouse. Conversion of video files may take a long time to complete.

*MP4 is basically a wrapper for the H.264 codec. Files which have been saved in .mov or .m4v will often work just as well. The important bit to get right is that the file needs a H.264 codec and AAC audio; otherwise it may not play on iOS devices (indicated by a greyed-out play button with a strike through it).

Mobile and tablet device support

Small iOS devices (like the iPhone and iPod Touch) do not support custom HTML5 audio or video players. Apple prefers that this content opens in the standard iOS media player, where the normal playback controls are shown to a user. In respect of this, the splash play button and custom control bar will automatically get hidden on small iOS devices (only the poster image and a standard iOS play button will be shown in the webpage). Some extra code has been deployed so that when the media has finished playing, the user will automatically get taken back to the webpage they came from.

Tablet devices like the iPad and various Android devices will handle the Player stack identically to the desktop version. This includes handheld versions of Chrome, Firefox and Opera. However it's worth noting that some functions like the fullscreen button or download button may not work. HTML5 media is still experimental, and some browser developers like Apple are yet to fully incorporate all functionality.

On smaller screens, you may feel it's not necessary to display certain controller buttons. To achieve this, use the breakpoint setting in the Player stack, to control the screen size at which you want particular buttons hidden. Edit the buttons to include a class of no-mobile in the existing call attribute, like this:

<span class='media-button no-mobile'><button type='button' class='fullscreen'><i class='fa fa-expand'></i></button></span>

Now if the screen size is less than the breakpoint, those particular buttons will be removed from view. The scrub bar, duration and current time controls are already removed on smaller screens, and you can replicate the same for other controls you want removed on smaller screens.

Poster frames

These are static images displayed while your audio or video is loading. In the case of audio, the poster frame will be displayed permanently, as a form of illustration (like album artwork). Poster frames can be turned on in the stack settings and you can use either a local or warehoused image. For best results, use a JPG, PNG or animated GIF image. Player stack installs some free sample poster frames in the Stacks media library, in 16:9 aspect ratio. The easiest way to create a poster image of your own is to open the media (like a video) at full screen. Then take a screenshot (Shift + CMD + 3) of a suitable frame, and save it as an image. If creating poster images using software like Photoshop or Pixelmator, start with a canvas size of 1080px wide and 608px tall for a 16:9 aspect ratio.

MIME Types

It's critically important that MIME types are correctly set on the web server, where you're running Player stack. Most of the time, this should not be a problem. However there may be isolated instances where older or cheaper web hosting companies have failed to properly configure MIME types at their end, on the web server. This can result in undesired things happening to your Player stack, like instances where media does not play in certain web browsers or error messages like 'files must be served with a proper mime type' are displayed. Alternatively you may find that media downloads in some web browsers, instead of playing correctly through the Player stack. It's the responsibility of the web hosting company to ensure this is setup correctly for you (after all, that's what you're paying them for)! If you suspect that MIME types are not correctly configured, contact the hosting company for help. Ask them to check the MIME types for MP4, WebM, MP3 and Ogg file formats. Alternatively, you can do it yourself by creating a .htaccess file in the root directory of your website yourself (if one does not exist already) and entering the following code:

AddType audio/mp3 .mp3
AddType audio/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
AddType text/vtt .vtt

This code will get the Apache web server software to send the correct Content-Type HTTP header for specific audio and video file types. It will make them play in the web browser, instead of download or not playing at all. The latter AddType is optional, and is required for text track support (text tracks are served in the .vtt format).

Serving your media content

As emphasised already, this stack is designed and developed exclusively for self-hosted media (audio or video files you host yourself). The advanced and highly customisable feature set offered in Player means that there is purposefully no compatibility or dependancy with other media hosting services, like YouTube, Vimeo or SoundCloud. You will need to take responsibility for hosting audio or video files yourself.

For basic experimenting, add your audio or video files as resources to RapidWeaver. For best results, use files less than 10MB in size (otherwise publishing will take a very long time and RapidWeaver will become crashy). This will allow you to experiment with Player stack on or offline with some simple media files.

For bigger files, the easiest option is to use your favourite FTP software and create a new directory on your web server (your web hosting company can help you with this). You can then upload your media files over FTP directly into this folder, together with any other supporting resources like poster images, caption files or downloads. However please remember that audio and video files have a tendency to consume a large amount of both disk space and bandwidth. Even if your web hosting company boasts 'unlimited' disk space or bandwidth, chances are that your media files will get throttled; and typically this will result in very poor play-back performance. Or worse, your hosting account may get terminated without warning for being in breach of 'fair usage' policies. So this option for self-hosting media content alongside your website should only be considered for short or infrequently accessed media files. Speak with your hosting company if in any doubt.

The other option is to go-down the CDN (content delivery network) route. Services like AWS and Rackspace provide a cheap, easy and reliable way to bulk-distribute large files across a network of high-performance file servers worldwide. CDN's, like the Amazon S3 service, are able to handle large file sizes and phenomenal bandwidth. Certainly the ability to publish complete albums or full-length HD film documentaries are feasible with a service like Amazon S3. This is why companies like Netflix use Amazon S3, and you can too. Signup for a free account and try it. It's a superb service worth experimenting with and the monthly costs are surprisingly low (often cheaper than normal web hosting).

Hosting media with AWS (Amazon Web Services)

The example audio and video's shown above were all hosted using the AWS service. Currently Amazon is offering basic accounts free of charge for the first 12 months. Here is the process used from start to finish:
  1. Signup for a free AWS account. You need to provide your contact and credit card details. Amazon automatically telephones you to verify your details and enter a secret PIN number. Accounts are typically setup within a matter of minutes.
  2. Login to your AWS account by clicking the Launch Management Console button
  3. In the Storage & Content Delivery section, click on the S3 (Scalable Storage In The Cloud) option
  4. Create a new bucket. Think of a bucket as a folder stored on a web server. Give the bucket a name and choose a geographic region where you would like it stored. Click the Create button when done.
  5. Click on the newly created bucket and then click the blue Upload button. Select the files or folders to upload (multiples are permitted), containing your media. Click the Start Upload button.
  6. Once the files have uploaded, select them in the file viewer and click on the Properties button. Then click Permissions. Click Add More Permissions and from the Grantee menu, choose 'Everyone'. Then save. Repeat for all the other files you've uploaded.
  7. While you're in the file viewer, click on the video files and click the Metadata option. Leave the key as Content-Type but change the Value setting to one of either audio/mp3, audio/ogg, video/mp4 or video/webm. This will ensure the video is streamed through the web browser, rather than downloaded. At the same time, right-click your file in the file viewer, and make sure it is Made Public
  8. From the services menu at the top of the AWS page, click on the CloudFront option. Create a new distribution, using the Create Distribution button.
  9. When creating a new distribution choose the Web option and click Get Started.
  10. In the Origin Domain Name box, select the new bucket you recently created.
  11. All other settings can be left as they are, nothing else needs to be changed for the distribution. Click the Create Distribution button when done. It may take several minutes for the distribution to 'go live' on all the AWS servers world-wide.

The links to your audio or video files are shown in the Properties panel, when you select a file in the bucket file manager.

Services like AWS may appear tedious to setup. But it should be stressed that the instructions above are for a complete signup and setup of a new AWS account, buckets and distribution. Ordinarily you would just upload your files directly into an existing bucket, set their permissions and content type, and they will be ready for use. Incidentally you can use regular FTP software like Cyberduck to access and manage your S3 web disk really easily.

Editing the Player control bar

A unique feature of the Player stack is the option to completely customise the control bar. This gives you the unmatched ability to remove unused buttons or change the order that buttons are shown in. The control bar can be edited by double-clicking it in RapidWeaver edit mode. You will then be presented with a code box, comprising of the following HTML markup:

<span class='media-button'><button type='button' class=' replay'><i class='fa fa-undo'></i></button></span>
<span class='media-button'><button type='button' class='play-pause'><i class='fa fa-play'></i></button></span>
<span class='media-button'><button type='button' class='skip-back'><i class='fa fa-backward'></i></button></span>
<span class='media-button'><button type='button' class='skip-forward'><i class='fa fa-forward'></i></button></span>
<span class='duration no-mobile'>00:00</span>
<div class='scrubberWrapper no-mobile'>
<div class='scrubber'>
<div class='progress'></div>
<div class='buffer-bar'></div>
</div><!--/scrubber-->
</div><!--/scrubberWrapper-->
<span class='time no-mobile'>00:00</span>
<span class='media-button'><button type='button' class='mute'><i class='fa fa-volume-off'></i></button></span>
<span class='media-button'><button type='button' class='tracks'><i class='fa fa-font'></i></button></span>
<span class='media-button'><button type='button' class='fullscreen'><i class='fa fa-expand'></i></button></span>
<span class='media-button'><a href='http://example.com/' class='download' download><i class='fa fa-download'></i></a></span>

Even if you've never worked with HTML code before, you should encounter no issues with customising the control bar. The code has purposefully been kept very simple and tidy. Buttons are automatically arranged from the left to the right, of the control bar. The width of the buttons and scrub bar can be controlled independently in the stack settings, and you get a basic preview of what your modifications look like in Stacks edit mode.

Each control (with the exception of the scrub bar) is presented on its own line. If for example you wanted to delete the captions button, then you would delete this line of code:

<span class='media-button'><button type='button' class='tracks'><i class='fa fa-font'></i></button></span>

or you can comment it out:

<!--<span class='media-button'><button type='button' class='tracks'><i class='fa fa-font'></i></button></span>-->

Buttons are formed of span tags with button tags and Font Awesome icon tags inside. It's recommended that you don't change the class attributes of the buttons, because this is what the jQuery Javascript code in the Player stack 'looks for' when connecting your buttons to the media. However you can change the icons (e.g. swap them for image tags or text labels) or add additional class values, to aid further CSS customisations later on (see the section below on helper classes and inline CSS).

The code for the scrub bar is a bit more complicated, as this includes divisional containers for both the progress and buffer (loading) bars. But it's still possible to move the scrubberWrapper container (in its entirety). As mentioned already, adding a class of no-mobile to any control will hide it, if the page falls blow the breakpoint width (customisable in the stack settings).

Font Awesome Icons used for the Player controls may not display in Stacks edit mode. This is completely normal. You need to be connected to the internet and / or have the Font Awesome Icons option selected for use in the Player stack settings. If your RapidWeaver theme is already including Font Awesome icons, this option can be disabled to reduce page weight.

Adding additional buttons and a download button

The final button listed in the Player stack is a download button and carries an attribute of download. This allows a user to download a file associated with the audio or video, like a PDF handout or the media file itself. The download link can be customised to any URL you want. If no download needs to be provided, you can safely delete or comment-out this download button, to remove it from display.

If space permits in the control bar, it's feasible to add your own, additional buttons. For example you might want a 'read more' link or a link to social networking websites. Generally speaking, you can copy the same format of existing buttons, using a pair of <span> tags, with your button or anchor tags inside. Use any of the 400+ Font Awesome Icons; or alternatively use text or an image as your custom button.

Custom buttons outside of the Player stack

Buttons can also be located outside of the Player stack, elsewhere on the page. For example, you could have a play / pause button located in a column or sidebar, somewhere on the page. To get this working, you will need to code some new buttons like these:

<span class='media-button'><button type='button' class=' replay-[player-id]'><i class='fa fa-undo'></i></button></span>
<span class='media-button'><button type='button' class='play-pause-[player-id]'><i class='fa fa-play'></i></button></span>
<span class='media-button'><button type='button' class='skip-back-[player-id]'><i class='fa fa-backward'></i></button></span>
<span class='media-button'><button type='button' class='skip-forward-[player-id]'><i class='fa fa-forward'></i></button></span>
<span class='media-button'><button type='button' class='mute-[player-id]'><i class='fa fa-volume-off'></i></button></span>
<span class='media-button'><button type='button' class='tracks-[player-id]'><i class='fa fa-font'></i></button></span>
<span class='media-button'><button type='button' class='fullscreen-[player-id]'><i class='fa fa-expand'></i></button></span>

Using the code presented above, replace [player-id] (including the brackets) with the ID of the Player stack you want to take control of. If you remember back to the beginning, you gave the Player stack a unique ID, and this is what you use to target your Player stack with, in the button code. Custom buttons are intended to replace the normal control bar - it's not wise to use both custom buttons and a control bar together. Additionally you may need to deploy some extra CSS code to 'smarten' the buttons and format them more towards your liking!

Helper classes and inline styling

These are simply little extra snippets of code you can add to the control bar HTML markup, to force custom styling over the Player settings. The YouTube style example above is a prime example of helper classes in use. In that example, we wanted to pull the video duration and current time closer together. This was achieved by modifying the controller bar HTML markup to this:

<div class='scrubberWrapper no-mobile'>
<div class='scrubber'>
<div class='progress'></div>
<div class='buffer-bar'></div>
</div><!--/scrubber-->
</div><!--/scrubberWrapper-->
<span class='media-button'><button type='button' class='play-pause'><i class='fa fa-play'></i></button></span>
<span class='media-button'><button type='button' class='mute'><i class='fa fa-volume-off'></i></span>
<span class='duration right-aligned' style="width:40px;">00:00</span>
<span class="player-extra-element" style="width:15px;">/</span>
<span class='time left-aligned' style="width:40px;">00:00</span>
<span class='media-button' style="float:right;"><button type='button' class='fullscreen'><i class='fa fa-expand'></i></button></span>

The duration element received an extra class of right-aligned, to align the button content to the right. The time element received an extra class of left-aligned, to align the button content to the left. Both the duration and time elements then received some inline CSS code of style="width:40px;", to constrain the elements more tightly. In the example, we also added a new element of <span class="player-extra-element" style="width:15px;">/</span> which forms the forward-slash character between the video duration and video time.

Linking directly to a Player stack on your page

If you've got lots of Player stacks on the same page, you can easily create an anchor link to that particular audio or video player. Just use the Player ID you assigned in step 2, of the setup instructions above. This acts as an anchor, so you can link directly to a Player stack with a hashtag in the link:

http://example.com/index.html#our-vacation

Linked Player stacks will not automatically play, unless autoplay has been enabled in the stack settings. In the example above, a user would be taken to the Player stack with an ID of our-vacation.

Captions

Captions are an extremely powerful feature of the Player stack, which allow you to overlay your audio poster image or video with text. This is ideal for users who are hearing-impaired, screen reader users; or simply for providing translations to your international users. For anybody serious about publishing quality video content online, captions are an almost essential component to setup. You can use a variety of software to transcript your media or manually prepare the captioning in a code editor. Captions need to be provided in WebVTT (.vtt) format, which is fast-becoming an industry standard for serving captioned content online.

If manually creating captions, open your preferred plain text or code editor. Enter the following content:

WEBVTT FILE

1
00:00:00.000 --> 00:00:12.000
ACE Widgets Inc. have been providing quality widgets since 1996

2
00:00:18.000 --> 00:00:30.000
and have a reputation for providing the finest widgets worldwide.

The first line tells the web browser that this is a WebVTT file containing the caption content. Each block of content comprises of a single cue. Times must be written in hh:mm:ss.mmm format. Based on the example shown above, the first cue will be displayed from the start of the video and run for the first 12 seconds in. The second cue will be displayed at 18 seconds and remain on screen until 30 seconds into the video. Repeat the setup of these cues to the end of the video. More information can be found online if you need help with WebVTT captioning. Websites like this one, and this one, and this one, are a great place to research HTML5 tracks in greater detail.

Once your named .vtt file is complete, upload it to to a folder on your web server. For security reasons, .vtt files must reside on the same domain that your Player stack is published to. Cross-domain calls are not presently supported for .vtt files (due to security policies). So if for example your website is published to http://example.com, the caption files need to be located on the same web server. Alternatively you can add your caption file as a resource, in the RapidWeaver sidebar.

Turn on caption support in the stack settings. Up-to 5 text tracks are supported in the Player stack; each track represents a separate caption file. Configure the links to point towards your caption files (either use a URL or link to a caption file added as a RapidWeaver resource). You will need some method for users to select or toggle captions on and off. So ensure your Player toolbar includes the caption button like this:

<span class='media-button'><button type='button' class='tracks'><i class='fa fa-font'></button></span>

Now when a user clicks or taps the 'A' icon in the toolbar, the labels of available captions will be shown in a drop-down toolbar. Clicking or tapping one of these options will enable that particular caption track. Captions or subtitles will be layered over the top of the video and display in-sync, based on your cue timings. Tracks come in five formats; these being subtitles, captions, descriptions, chapters and metadata.

It's important that the language for each track is unique, as this forms the crucial link between the track buttons and the track rendered over the audio or video. So if you have two or more tracks that share the same language code (e.g. 'en') just append a hyphen and a number afterwards like this: en-1.

Print output

When Player stacks are printed or saved as PDF, the control bar and splash play button are automatically hidden. Only the poster frame will get shown. This results in much tidier print and PDF output. The poster frame will print in colour or monochrome, depending on the printer and printer settings used.

Browser compatibility

Player is an HTML5 audio and video player. Therefore it will work in all modern web browsers, like IE9, IE10, IE11, Edge and the latest versions of Safari, Firefox, Opera and Chrome. We've purposefully omitted any form of Flash fallback, in order to keep this media player really simple and lightweight. Therefore it will not work in old / unsupported web browsers, like IE7 and IE8. A customisable error message will be displayed if the Player stack fails to load. The free Conditionals stack and RottenApple stack let you do alternative things with Player, in unsupported web browsers too.

Basic troubleshooting

If you are having problems with audio or video playback in the Player stack, try the following things before contacting support:
  • Do all Player stacks on the page have a unique ID assigned to each of them?
  • Have you prepared media in the required formats and checked it is not corrupt?
  • Are the links to your media, poster images or caption files correct?
  • Is there another stack, plugin or script on the same page that is conflicting with Player?
  • Is the HTML markup for the player controls complete and free of errors?
  • Have settings in the web browser been changed to effect audio or video playback?
  • Does the browser console report any errors?
  • Are WebVTT caption files stored on the same domain as Player stack?
  • Has your web hosting company set the correct MIME types on the web server?
  • If buttons are getting cropped on smaller screens, put the Player stack within a larger column or increase the width of the buttons.

Tip: The Player stack includes a useful setting marked Debug Mode. When enabled, the Player stack will output a number of informational messages in the web browser console, every time an event happens. This can be useful in diagnosing and resolving common problems. For example if you clicked a play button but nothing happened, this could indicate there is a fault with the audio or video file loading.
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.