Player is one stack that combines support for both audio and video files. An easy way to get self-hosted or warehoused media embedded safely within your webpages and viewable to a worldwide audience on a variety of browsers and platforms. No complicated code or configuration is required; Player makes the whole task effortless! Player has grown to become the most popular audio and video stack available for RapidWeaver, and it's easy to see why. Player grants you the power to quickly create stylish and sophisticated media players in your web projects.
Sure, you could upload your content to a service like Soundcloud, YouTube or Vimeo; and quickly embed that within your website. But these services typically aren't geared-up towards handling professional audio and video content. Most of these services re-encode your uploaded content; resulting in depreciated playback quality. Then you have the ongoing battle of advertising, suggested content, copyright issues and the growing problem of censorship to deal with. It's your content, so wouldn't it be great to broadcast it yourself? Player is what you need!
Sure, you could upload your content to a service like Soundcloud, YouTube or Vimeo; and quickly embed that within your website. But these services typically aren't geared-up towards handling professional audio and video content. Most of these services re-encode your uploaded content; resulting in depreciated playback quality. Then you have the ongoing battle of advertising, suggested content, copyright issues and the growing problem of censorship to deal with. It's your content, so wouldn't it be great to broadcast it yourself? Player is what you need!
The video above provides another working example of the Player stack. With the default options applied, this Player stack is used to embed an MP4 video from Amazon S3 servers, with a total size of 216MB.
Player is an audio and video stack developed exclusively for RapidWeaver. It has zero dependencies on any outside services or plugins. The simplicity and flexibility of the codebase has allowed us to gradually turn Player into the most customisable and sophisticated audio and video stack available for RapidWeaver. The list of customisable options is near-endless! This is a media player that is easy to setup, but one which you can fine-tune to match seamlessly with your existing RapidWeaver theme or corporate branding. Player supports several 'expert grade' features not available in other stacks; like ending redirects, fullscreen mode, click-to-play, subtitles / captioning, Chromecast compatibility and support for realtime GoogleTM Analytics tracking.
Examples
Here are some real working examples of the Player stack. Don't forget to also download the free demo version from above, to test the stack inside RapidWeaver yourself.
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 the order of the remaining ones.Player will simultaneously serve MP3, OGG and WAV audio formats, for the best possible web browser compatibility.
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
Song Name Goes Here Like This - Artist Name
Song Name Goes Here Like This - Artist Name
Song Name Goes Here Like This - Artist Name
Song Name Goes Here Like This - Artist Name
Audio playlist
Player does not have support for true playlists as such - with the PlayLister stack being better suited for this task. However by turning off poster images and setting the aspect ratio to 0% in the stack settings, you can create an extra slimline audio player.Then you can place each minified Player stack into a 1 column stack, with a background fill and rounded corners applied. The title text is just formed using a regular text stack dragged and dropped into the 1 column stack, above Player stack. The Stacks plugin lets you group multiple stacks together into columns, and this is an excellent example.
A special mechanism is built into Player, ensuring that only a single HTML5 audio or video file will play on the page, at any one time. This is achieved by listening for a click or touch event happening outside of the currently playing Player stack. This also makes Player stack good to use inside accordions or tabs - when a user clicks away the audio or video will stop playing.
Default settings
This example uses the default settings for the Player stack. Only a few essentials have been adjusted, to pull the video files into the page and provide a custom poster image. All other settings have been left alone.The choice of style options available in Player may look bewildering at first. However you can toggle groups of settings open and closed, to keep your workspace tidier. Player is the most customisable audio and video stack available for RapidWeaver, so it needs lots of options!
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.
Minimal player
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). We have also removed a couple of the toolbar options, like replay, fullscreen, subtitles, volume and downloads.This minimalist video player is ideal to use for giving website visitors a super-simple video playback option. As always, once you've setup one Player stack to your liking, you can easily duplicate and reuse them throughout a website.
Styled
Another illustration of the almost infinite customisable options available with this powerful stack. In this instance, the control bar was set to overlay. The Player control bar was 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 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.
- Off
- Journey Description
Captions / subtitles
Click the subtitling icon in the control bar to access the text track menu and toggle subtitles on or off. If you want to download the WebVTT file used for the captioning of this video, use this link.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.
Setup
Follow these instructions (in this order) to get a basic Player stack working in your webpage:- Once the Player stack has been installed, drag and drop a copy of Player from your Stacks library into the webpage.
- 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.
- Below the ID box in the stack settings, toggle between embedding either an audio or video file. The preloading type can be changed if required.
- Set the links to your audio or video file. See the details below on conversion tools and the best file formats to use
- 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
- Optionally you can provide a static poster image in the stack settings. This image is in PNG or JPG format. In the case of a 16:9 video, the image to use would need to be 1920 pixels wide and 1080 pixels tall.
- 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
Preparing your media for the web
Just like any other HTML5 media player, audio files need to be in MP3 format and video files need to be in MP4 format. This will give you the widest possible compatibility with different devices and web browsers. Additionally you may wish to supplement your player with other opensource media formats listed; which will be used by older web browsers. For a long period of time, browsers like Firefox and Internet Explorer did not support MP3 or MP4. This is less of a problem nowadays, but you may still want to provide fall-backs.Don't waste money on expensive conversion software to prepare audio or video for the web! Free apps like Adapter, Handbrake and Miro Converter are absolutely perfect for converting your media into web safe formats with drag-n-drop ease. There are also several online services that can convert media for you. If content like video is already hosted with services like YouTube or Vimeo, you can again use online services or an app like Mac VideoRipper Pro to download this content onto your computer.
If you are finding that your content does not playback, then the most likely reason is the link to it is wrong. You can easily test this yourself by typing the URL for the audio or video file in your browser address bar, and see if the link resolves. If you find the audio or video only plays on some browsers, it might be that an incorrect codec has been used during conversion or the file is wrapped inside another format (iOS is particularly fussy about media formats). If your MP3 or MP4 files are downloading instead of playing, ask your web hosting provider to check MIME types are correctly configured on the server.
Content you use in Player is content you host yourself. Player is unable to reuse content stored with online providers like SoundCloud, Vimeo or YouTube. For smaller files, you should be okay to add these as resources in RapidWeaver or upload them to your web hosting account via FTP. For bigger files (several hundred megabytes or larger), it is definitely worth putting them with a cloud provider like Amazon S3. Then you can be assured of having ample bandwidth and disk space to serve your content to all your website users. Plus the benefits associated of content being mirrored from different servers worldwide.
Mobile and tablet support
With so many users coming to websites from tablet and smartphone devices, it is increasingly important to ensure that audio and video content will continue to play correctly for those users. But not all devices and operating systems are capable of handling HTML5 audio or video content in the same way. There remains much inconsistency between different devices.In Player 2, all mobile and tablet devices will see the custom toolbar. On smaller screens less-than 568px wide (like Android smartphones) the toolbar will split into multiple rows; therefore permitting all the controls to display properly. You can test what this will look like by previewing the webpage in a desktop web browser and making the window narrower.
The exception to the above is that of iPhone and iPod Touch. Small Apple iOS devices do not properly support custom media controls and older devices open video inside a new tab. So to simplify things, custom controls are removed in exchange for the standard iOS media controls. A new playsinline attribute added to the video will attempt to play the video within the webpage, but this is not guaranteed to work across all versions of iOS.
The fullscreen button is automatically hidden in web browsers (like iPad) which do not support fullscreen video. We will continue to evaluate and update Player stack as compatibility changes.
Captions and subtitles
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. You can use a variety of software to transcript your media or manually prepare the captioning in a plain text 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. 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.Using Player with GoogleTM Analytics
It could be very useful to know how many people are playing your media content and the number of interactions. If you are already using GoogleTM Analytics in your website, then Player makes the process extremely simple; no additional plugins need to be purchased and no complicated configuration is required. You can continue to use your existing GoogleTM Analytics tracking code entered into RapidWeaver. Player is able to log the following events:- Number of times the play, pause, skip back, skip forward, replay, text tracks, volume control and fullscreen buttons are clicked
- The number of people who play beyond the 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80% and 90% duration points
- A total number of times the content is played right-through to the end (100% playback)
All of these statistics are collected in realtime; available for display in your GoogleTM Analytics dashboard. This information can help you quickly and reliably see how often a media file has been played and provide a little insight towards listening and watching habits. With this information to hand, you can seek to improve the placement of media or determine which content is most popular on a website. This data can be collected in parallel to your regular website analytics.
Analytics support is optional and is enabled in the Player Advanced Settings. The customisable Event Label setting lets you tag particular Player stacks with a custom description (like the name of a video) and multiple Player stacks can be categorised in your analytics view using the Event Category (this can be left as the default value, if you prefer) option. To view the playback statistics, simply login to your GoogleTM Analytics account, select a website, click on Real Time and then click Events. In the Event Category column, click Stacks4Stacks Player and then you can view the realtime data collected from all your Player stacks, throughout a website.
Custom buttons [advanced]
Player is very extendable, and you can create your own custom buttons to interact with the player interface. The process works by giving buttons some class attributes and values. The table below provides a list of custom classes and a description of what they will do. In each instance, replace 'myPlayer' with the actual ID of the Player stack you want to target.| play-myPlayer | Starts playing the audio or video file |
| pause-myPlayer | Pauses the audio or video file |
| replay-myPlayer | Restarts playback of the audio or video file from the start |
| skip-back-myPlayer | Skips the playback of an audio or video file backwards |
| skip-forward-myPlayer | Skips the playback of an audio or video file forwards |
You can use an unlimited number of custom buttons and place them anywhere on the page; including sidebars, toolbars and ExtraContent containers. Please note that some button stacks don't allow you to set custom attributes, so you may need to contact the developer to ask for help. To ensure the button 'jumps' to the correct position in the page where the Player stack is located, you can give a link a
href attribute equal to the ID of the player.