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) andpink.flagare available. Alternately, you can specifycustomas 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 to1to automatically play, or0to 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>
