Stacks4Stacks

MixingDeck is styled using Twitter Bootstrap 3. It should work in most HTML5 RapidWeaver themes, but definitely a theme advertised as having support for Bootstrap would be a clear advantage (like the ones available on the ThemeFlood website) and give you extra options for the playlist titles. In the stack settings, you can customise the colours of MixingDeck, to match your existing theme or colour scheme.

If you only need to display a single audio or video file using this stack, the playlist can be hidden from view using the 'Hide Playlist' checkbox option in the stack settings. At that point, MixingDeck will revert back to a standard player.

Another bonus of using MixingDeck is that it's fully responsive. You'll find that the poster artwork, video and the playlist automatically scale down on smaller screens to fit the space. So you should not see sections of the media player cut-off or ugly horizontal scrollbars displayed. Responsive behaviour was one of the essential criteria when MixingDeck was developed.

You can place MixingDeck in the main content region of a page. You could also use PlusKit or Global Content (not included) to embed MixingDeck into a sidebar or another page. Multiple MixingDeck stacks may be used on the same page if required.

Example

Below is an example of the MixingDeck stack. In this example, we have simply dragged and dropped a MixingDeck stack straight into a page and left the example playlist and stack settings as the default.

In the MixingDeck example shown above, we have purposefully used audio and video of a lower a quality, to keep file sizes to a minimum and allow users on slower internet connections to test MixingDeck more easily. However MixingDeck will easily support audio or video of a far higher 'HD' quality. A MixingDeck stack can include as many or as few audio or video items as you like. It may also be possible to edit the playlist outside of RapidWeaver, using a content management system. Audio, video and artwork files can be sourced from more than one location if required.

Setup instructions

Yes, this stack involves the use of some HTML code, but I think you will be surprised at just how easy it is to setup and there is nothing to be afraid of here! So read on.

Start by uploading your audio or video files to a warehouse. By "warehouse", we mean a public folder on the internet, like a shared / public Dropbox folder, Amazon S3 storage (as in this example) or just a regular folder on your web server. Uploading and maintaining these audio and video files outside of RapidWeaver will keep things running smoothly and limit the risk of any stability issues often associated when working with or publishing large files in RapidWeaver. At the same time, you should also prepare some basic artwork in image format, which is used as the poster during loading of video and during playback of audio. This artwork should be in JPG or PNG format, 72 dpi, no larger than 200 KB in size.

In order to satisfy the needs of all major web browsers, you need to provide video in both of these two formats:
• MP4
• WebM

And for audio, you need to prepare and upload each track in the following two formats:
• MP3
• Ogg

The easiest way to convert your audio or video files into these formats is to use the free Handbrake app, which is absolutely fantastic for this task and really simple to use. This works great for both audio and video and gets the job done quickly using 'presets'.

Once you have audio or video uploaded in both formats, the next stage is to link to the files via your playlist. To do this, double-click the HTML placeholder in Stacks edit mode (within the MixingDeck stack). For each audio or video item, use the following code:

<li class="list-group-item"
data-media="audio"
data-primary="http://example.com/my-audio.mp3" 
data-secondary ="http://example.com/my-audio.ogg" 
data-poster="http://example.com/artwork.jpg">
	Title of my audio for video playlist item
</li>

This code is basically a regular HTML list item with a Bootstrap class of list-group-item applied. These attributes are added to the opening list item tag:

• The data-media="" is where you specify if the file is a video or audio file.
• The data-primary="" is where you put the full URL to your audio or video file in either MP3 or MP4 format.
• The data-secondary="" acts as a reserve, and is the path to your WebM or Ogg content, for web browsers that do not support either MP3 or MP4 (think of this as the fall-back file format).
• The data-poster="" is the full URL to your poster artwork; and can be a file stored online already or a file added as a resource in RapidWeaver.

Between the opening and closing list item tags you have your title. Customise the title to anything you want. It can be the name of the video or audio file; and you can optionally include other information like its date, length, format or other information of use to your website visitors.

Repeat for each audio or video item in MixingDeck. If you find it easier, use an external code editor like Expresso, Coda or TextWrangler to code and setup your playlist; then paste it back into Stacks (into the MixingDeck stack).

Note that the first item in the playlist has an additional class of active applied to list-group-item. The purpose of this it to highlight (blue by default) what item in the playlist is currently selected for playing. Clicking another item in the playlist stops whatever one is currently playing and loads the next one (which will again receive the 'active' class).

We purposefully don't preload audio or video clips, in order to save bandwidth. Nor do we provide controls to navigate backwards or forwards through a playlist. The emphasis of this plugin is to keep things really fast and simple for end users.

There are quite a lot of things you can do with the titles. Typing <span class="badge">01:37</span> before the title will create a basic badge floated to the right (which could be used to display the duration or file size of a file). You could introduce additional artwork in the form of small thumbnail images. You may also want to introduce subheadings, links or longer text descriptions. Typically these extra title additions only work if your RapidWeaver theme has support for Twitter Bootstrap 3 (all ThemeFlood themes do).

Updating to MixingDeck 1.1

Version 1.1.0 (released on Thursday 12th February 2015) needs to be manually downloaded and installed, using the link at the top of this page. When applying this free update, you will need to update your playlist HTML markup slightly. This is necessary to reinforce browser compatibility and give web browsers clear information about the type of media you're serving. Previous versions of MixingDeck used this markup for each playlist item:

<li class="list-group-item" 
data-primary="http://example.com/my-audio.mp3" 
data-secondary ="http://example.com/my-audio.ogg" 
data-poster="http://example.com/artwork.jpg">
	Title of my audio for video playlist item
</li>

As of Mixingdeck 1.1.0, the markup for each item changes to this:

<li class="list-group-item" 
data-media="audio"
data-primary="http://example.com/my-audio.mp3" 
data-secondary ="http://example.com/my-audio.ogg" 
data-poster="http://example.com/artwork.jpg">
	Title of my audio for video playlist item
</li>

From this source code sample, you can see the addition of a new data-media="" attribute. This is done to define if the playlist item is either an audio or video file. The web browser will then correctly load the required player (either an audio or video player). This addition is compulsory and MixingDeck will not function without it. The word audio can be interchanged with video; depending on whether you're embedding an audio or video file. This is the only change required in 1.1.0.

Browser support

MixingDeck has been tested and is fully compatible with all major web browsers, including IE9, IE10, IE11, Safari 8, Google Chrome 40, Firefox 35 and Opera 27. It also works on handheld tablets and smartphones like the iPhone, iPad, iPod Touch and newer Android devices. You will struggle to find an audio or video player stack elsewhere with such broad compatibility!

IE7 and IE8 are not supported, and the MixingDeck stack will be safely hidden on these web browsers. Stereotypically, most individuals or businesses preferring to use older versions of IE are unlikely to want audio or video playing in a website anyway, so the removal of MixingDeck from these older versions of IE is no hard loss. You could use the free Conditionals stack to display some alternative content for older versions of IE if you prefer. Typically you have to use Flash player to get basic audio or video support in older versions of IE.

Most web browsers will playback audio in MP3 format and video in MP4 format; for this reason we have branded this the 'primary' format in MixingDeck. As of September 2013, the only web browser that seemed to still be using WebM / Ogg formats was Opera 12. We still provide a secondary format, not only for Opera users, but also for anyone else still using an older version of Firefox.

Most web browsers will print MixingDeck stacks identically to how they're shown on the page.

Audio and video controls

In this media player, we just use the default audio and video controls provided by the web browser. Why you might ask? The answer is that most internet users will already be familiar with these controls and they do a good job. Things have moved on a lot in recent years. Typically a web browser will display a standard play / pause button, a progress bar, clock counter and volume control. Additional controls like mute or download are sometimes listed when you right-click on the player. Some browsers like Chrome and IE also display a useful button to send the video full screen. To change these controls would be a lot of hard work and would almost certainly undo some of the functionality.

How does MixingDeck work?

Basically we start with an empty HTML5 media tag. Modernizer is used to run a quick test on the web browser and find out what format of audio or video the browser would most prefer to use. Based on that result, we then use jQuery to fetch the data attributes from your playlist code and construct the media player dynamically. If you click onto another item in the playlist, the currently playing item is terminated and the next one is loaded instead. And that is about all there is to it. Of course, the code behind the scenes is pretty complicated, but the setup interface you see in Stacks and the completed player your website visitors see is much simpler.

Other notes

Ultimately the final compatibility of MixingDeck boils-down to what web browser or version an end user is viewing the website through. Also some browser plugins or extensions may change the behaviour and effect how audio or video files are handled. That's outside of our control and there's nothing we can do to change that.

If you're finding that audio or video files are downloading instead of playing within the page, first run some browser tests to try to isolate this as a browser fault (test different browsers like Chrome, Firefox and Safari). If the issue continues, speak with your web hosting company and check that the correct MIME types are setup properly on the hosting server; because this will directly effect how browsers handle media files. Most 'better' hosting companies are familiar with MIME types and can help you.

Needing Soundcloud support?

Cric from RapidIdeas has released a stack element for integrating Soundcloud playlists into your website. It's well worth checking out, if you host audio on Soundcloud. In some respects, the Soundcloud stack looks and functions similar to MixingDeck.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.