Major Updates to Streaming Player Coming Soon

When we launched the Topspin application to the public in March, many of you noticed our media players were still awkwardly making the transition from Flash to HTML5. Many of you also wrote in voice your displeasure over their design, and the lack of embed codes. Your feedback was constructive and spot-on. And we listened. The images in this post show off the new designs, and include the graphics of one our favorite self-serve power users, Tricil. Watch for these updates to roll out in the next two weeks. Read on for a full explanation of what’s going to change.

Our Goals
When we decided to develop new Topspin media players, our goal was to create a completely cross-browser, cross-platform solution that would provide similar functionality on both computers and mobile phones. We have been working to improve the stability and consistency of the players before adding all of our planned features; after all, making sure they behave the way you expect is of paramount importance.

Here’s what’s new:

Player Sizing
All player elements are now sized in accordance with the media they contain, and the dimensions of the widget. This makes the players much easier to size correctly, and it allows artwork to fill the player frame edge-to-edge. Video player users, rejoice!

HTML5 *and* Flash
The use of both technologies makes the players work on as many pages and devices as possible: HTML5 for your iPad, Flash for your Facebook news feed. The best of both worlds.

Longer Call-To-Action text
Fourteen characters allow your call-to-action button to say “Free Download!” or “Get The Album” or “Click To Buy” or anything you’d like.

iframes
Many of you have noticed that the widget embed codes are now iframes, rather than object embed codes. While iframe embeds definitely have their own issues and quirks, they also allow a great deal of flexibility in terms of how you will be able to customize the player. Resize the dimensions of the code and watch the player resize to fit. We’ve also created a WordPress plug-in that eliminates the issues that occur when embedding iframes on WordPress, and has the pleasant side-effect of allowing you to use YouTube and Vimeo’s new embed codes as well. Click here to download the plug-in directly. Check the Knowledgebase and our Community Forums for more info.

New and Old Features
Moving forward, we’ll be making the new players even easier to configure and customize than the old Flash players in the coming weeks. This includes the ability to change text colors, button colors, and – eventually – the entire player skin. Sweet, huh?

We have been listening to your requests, and in the short term, you will soon see a new interface that brings back the “embed” copy function, as well as a revised look and feel.

In an effort to satisfy power users, we have worked towards keeping much of the player “chrome” (call to action, social sharing, and playlists) as HTML elements that can be skinned via CSS. The Flash player itself can be skinned using simple XML files.

Other Features
Topspin gives you the option to associate an image to each piece of audio or video you upload. These images are displayed in the media player by default. You can use these images to individually customize each song or video you upload.

Alternately, there are the “single image” and “slide show” options for each widget. These options allows you to assign a single image, or series of images to the background behind the media player. They will be covered by any image that is associated with an audio track or video, and they will fade out when a video is being played.

Flickr slideshows will be re-implemented with additional controls that allow you to pull in tagged images, images for a specific user, or images from a specific Flickr group.

Images are scaled to fit the full height of your media player. They are then centered, and any part of the image that is not within the widget is hidden.

iOS and HTML5 Limitations
iOS poses a number of limitations for the media players. Since Flash is not supported, neither are playlists, as they are currently integrated into the Flash player; this is something that will be addressed in the near future when we move away from Flash playlists entirely.

iOS uses a version of the HTML5 video layer; unlike a regular HTML5 implementation, the video is played using Apple’s own video player in a full-screen mode. This means our custom skins will not show up on iOS devices. Instead, you’ll have the standard Apple video play button, without the ability to add slide shows. If your video does not have an associated image, but there is a slide show with at least one image, the player will take the first image from the slide show and make it the background you see behind the play button.

Audio will be playable through the HTML5 audio wrapper shortly; the team working on the HTML5 player is including audio with their next revision.

Facebook
Our players are now set up to play media directly in Facebook, and Topspin is a verified media provider for Facebook. We have noticed that some accounts do not yet recognize Topspin as a verified provider; if you run into this problem (if your rich media widgets will not play directly in Facebook), please contact Artist Support and let us know so we can file a bug with them.

The Future
Creating these players in a short time frame has been a challenge, and we appreciate your patience as we iron out any bugs we come across. Remember: The goal here is to provide you will a set of features that allows you to customize and present your content in a way that is consistent with your vision. As we release new updates, we’ll keep you informed, and provide revised documentation on how to best use the new Topspin media players (something which we admit is currently lacking).

Look for a LOT of updates coming soon. The Connect For Media widget is next on our list, after the streaming players. And to make it easier to generate properly sized embed codes, and expose all the features the players offer, we have a revised widget generation process planned as well.

We appreciate your feedback. Keep the comments coming! We’re all ears.