Web Player

About the Widget

The Web Player widget provides a web-based media player that your clients can use to tune in to your stream without leaving your web page, and without using an external media player.

This widget can be configured on the Widgets tab of the Configuration Settings page.

Basic Customization

The placeholder <div> element provided for the widget supports some additional options for basic customization of the widget.

• skin - Specifies the name of the skin to use for the player.

  • When using Muses, a skin can be chosen on the Widgets page.
  • When using jPlayer, the skins blue.monday (the default) and pink.flag are available. Alternately, you can specify custom as the theme name and embed your own jPlayer skin stylesheet in your web page.

• width - Specifies the width of the player (in pixels).
  Normally this is autodetected from the skin, but may be overridden here.

• height - Specifies the height of the player (in pixels).
  Normally this is autodetected from the skin, but may be overridden here.

• autoplay - Specifies whether or not to automatically begin playing when the page loads.
  Set to 1 to automatically play, or 0 to require the user to press play.

These options may be added to the <div> placeholder as HTML5 data attributes. For example, to specify skin foobar and turn on autoplay, you could use:

<div class="cc_player" data-username="user" data-skin="foobar" data-autoplay="1">
    Loading ...
</div>

Advanced Customization

Developers familiar with JavaScript may embed in their pages a code block similar to the following to customize the behavior of the widget.

This configuration block must appear before the JavaScript code for the widget.

<script language="javascript">
(function(){ var centovacast = (window.centovacast||(window.centovacast={}));
(centovacast.player||(centovacast.player={})).config = {

muses: { // configuration used when Muses is your configured player
    lang: 'auto',          // force a specific language for the Muses interface
    volume: 75,            // set initial volume
    autoplay: false,       // automatically begin playing on page load
    buffering: 5,          // number of seconds of audio to buffer
    bgcolor: '#FFFFFF',    // background color (change to match your page)
    //width: 180,          // set a custom widget width (defaults to skin width)
    //height: 60,          // set a custom widget height (defaults to skin height)
    //title: 'Title',      // set a custom title (defaults to your station name)
    //skin: 'http://example.com/skin.xml', // use a custom Muses skin URL
},
jplayer: { // configuration used when jPlayer is your configured player
},
wmp: { // configuration used when Windows Media Player is your configured player
    autostart: 0,          // automatically begin playing on page load
    showcontrols: 1,       // show WMP playback controls
    showstatusbar: 1,      // show WMP status bar
    showdisplay: 1,        // show WMP display
    //width: 180,          // set a custom widget width
    //height: 60,          // set a custom widget height
}

};})();
</script>

---