<!DOCTYPE html>
<html>
<head>
<title>Demo AMC Player 4</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="example.css" />
<!--
<link rel="stylesheet" type="text/css" href="../mcplayer.min.css" media="screen" />
-->
<script src="functions.js"></script>
</head>
<body>
<div id="morehead">
</div>
<h1>Demo AMC Player :: Look and feel</h1>
<nav>
<a href="example1.html">Get started</a>
<a href="example2.html">Song infos</a>
<a href="example3.html">API</a>
<a href="example4.html" class="active">Skins</a>
<a href="example5.html">Language</a>
<a href="example6.html">Streams</a>
</nav>
<!-- ************************************************************** -->
<h2>Live demo for skin selection</h2>
<form style="width: 90%; ">
<p>
Click, to activate / switch color sets and layout types.<br>
You will see that the player immediately changes.<br>
Additionally have a look to the html preview section below - this
also changes the required code.
</p>
<table><tr>
<td>
Color set:
<select id="selColor" onchange="changeTheme();">
<option value="">Default</option>
<option value="lightgreen">light green</option>
<option value="lightbrown">light brown</option>
<option value="lightviolet">light violet</option>
<option value="darkgray">dark gray</option>
<option value="flat-white-black">flat white</option>
<option value="flat-dark">flat dark</option>
</select>
<p><strong>Player Color</strong>
With the shipped CSS you get a default skin.<br>
You can create custom skins with overriding the CSS elements.
To give you an entry point you can have a look to the css files in
the <strong>skins</strong> directory.<br>
</p>
</td>
<td>
Type:
<select id="selType" onchange="changeTheme();">
<option value="">Default</option>
<option value="bottombar">Bottom side</option>
</select>
<p>
<strong>Layout Types</strong>
The player is shipped with 2 style types: window like and as bottom bar.<br>
The bottom bar is activated in the same way: by loading a css file.
That it is fixed is done with css property <em>bottom:0</em><br>
<br>
remark: If you use a style with drag and drop support (for playlist, download window) but
the main window must be unmovable, then you can switch it with true/ false:
</p>
<pre>oMcPlayer.makeMainwindowMovable(false);</pre>
</td>
</tr>
</table>
</form>
<div style="clear: both;"></div>
<div style="height: 40em;"></div>
<h3>Html preview</h3>
<pre>
<head>
(...)
<link rel="stylesheet" type="text/css" href="mcplayer.min.css" media="screen" />
<span id="cssmore">(...)</span>
</head>
<body>
(...)
<script src="../addi.min.js"></script>
<script src="../mcplayer.min.js"></script>
<!-- initialize the player -->
<script>
var oMcPlayer=new mcPlayer();
oMcPlayer.init();
<span id="playermore">(...)</span>
</script>
</body>
</pre>
<!-- ************************************************************** -->
<h2>Example audios</h2>
<p>
The following audios are linked to my website https://www.axel-hahn.de
They are free for non commercial usage (license: cc 3.0 - by-nc-sa).
This is the same set like in the introction.<br>
<a href="https://www.axel-hahn.de/music/axels-songs/" target="_blank">Axels songs</a>
</p>
<div style="clear: left; padding: 0.5em 1em;">
<audio loop="loop"
controls="controls"
preload="none"
title="Ticker"
data-title="Ticker"
data-artist="Axel Hahn"
data-album=""
data-year="2017"
data-image="https://www.axel-hahn.de/assets/audio/cover/ticker.jpg"
data-genre="electronic"
data-bpm="120"
data-url="https://www.axel-hahn.de/music/axels-songs"
>
<!-- stereo sources -->
<source src="https://www.axel-hahn.de/axel/download/ticker_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
<source src="https://www.axel-hahn.de/axel/download/ticker_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="https://www.axel-hahn.de/axel/download/ticker_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
<source src="https://www.axel-hahn.de/axel/download/ticker_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</audio>
Ticker
</div>
<div style="clear: left; padding: 0.5em 1em;">
<audio loop="loop"
controls="controls"
preload="none"
title="Let's Play"
data-title="Let's Play"
data-artist="Axel Hahn"
data-album=""
data-year="2017"
data-image="https://www.axel-hahn.de/assets/audio/cover/lets_play.jpg"
data-genre="electronic"
data-bpm="80"
data-url="https://www.axel-hahn.de/music/axels-songs"
>
<!-- stereo sources -->
<source src="https://www.axel-hahn.de/axel/download/lets-play_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
<source src="https://www.axel-hahn.de/axel/download/lets-play_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="https://www.axel-hahn.de/axel/download/lets-play_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
<source src="https://www.axel-hahn.de/axel/download/lets-play_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</audio>
Let's Play
</div>
<div style="clear: left; padding: 0.5em 1em;">
<audio loop="loop"
controls="controls"
preload="none"
title="Lift Control"
data-title="Lift Control"
data-artist="Axel Hahn"
data-album=""
data-year="2016"
data-image="https://www.axel-hahn.de/assets/audio/cover/lift-control.jpg"
data-genre="electronic"
data-bpm="125"
data-url="https://www.axel-hahn.de/music/axels-songs"
>
<!-- stereo sources -->
<source src="https://www.axel-hahn.de/axel/download/lift-control_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
<source src="https://www.axel-hahn.de/axel/download/lift-control_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="https://www.axel-hahn.de/axel/download/lift-control_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
<source src="https://www.axel-hahn.de/axel/download/lift-control_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</audio>
Lift Control
</div>
<div style="clear: left; padding: 0.5em 1em;">
<audio loop="loop"
controls="controls"
preload="none"
title="November"
data-title="November"
data-artist="Axel Hahn"
data-album=""
data-year="2015"
data-image="https://www.axel-hahn.de/assets/audio/cover/november.jpg"
data-genre="electronic"
data-bpm="125"
data-url="https://www.axel-hahn.de/music/axels-songs"
>
<!-- stereo sources -->
<source src="https://www.axel-hahn.de/axel/download/november_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
<source src="https://www.axel-hahn.de/axel/download/november_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="https://www.axel-hahn.de/axel/download/november_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
<source src="https://www.axel-hahn.de/axel/download/november_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</audio>
November
</div>
<div style="clear: left; padding: 0.5em 1em;">
<audio loop="loop"
controls="controls"
preload="none"
title="Give me a BIT more"
data-title="Give me a BIT more"
data-artist="Axel Hahn"
data-album=""
data-year="2015"
data-image="https://www.axel-hahn.de/assets/audio/cover/gimme-a-bit-more.jpg"
data-genre="electronic"
data-bpm="120"
data-url="https://www.axel-hahn.de/music/axels-songs"
>
<!-- stereo sources -->
<source src="https://www.axel-hahn.de/axel/download/gimme-a-bit-more_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
<source src="https://www.axel-hahn.de/axel/download/gimme-a-bit-more_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="https://www.axel-hahn.de/axel/download/gimme-a-bit-more_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
<source src="https://www.axel-hahn.de/axel/download/gimme-a-bit-more_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</audio>
Give me a BIT more
</div>
<!-- ************************************************************** -->
<script src="../addi.min.js"></script>
<script src="../mcplayer.min.js"></script>
<script>
// show player and playlist:
var oMcPlayer=new mcPlayer();
oMcPlayer.init();
oMcPlayer.maximizeBox('playlist');
/*
* ------------------------------------------------------------------
*
* Hi there,
*
* nice to see you here.
* But... just wanna tell you:
*
* All the javascript code below is not needed to implement the
* player. It is to run this example page.
*
* ------------------------------------------------------------------
*/
/**
* callback of select boxes ... change url an call updater
* @returns {Boolean}
*/
function changeTheme(){
var sUrl='';
var oSelType=document.getElementById('selType');
var oSelColor=document.getElementById('selColor');
if(oSelType.value){
sUrl+=(sUrl ? '&' : '?') + 'type='+oSelType.value;
}
if(oSelColor.value){
sUrl+=(sUrl ? '&' : '?') + 'skin='+oSelColor.value;
}
if(!sUrl){
sUrl='?';
}
// location.href=sUrl;
window.history.pushState('dummy', 'Title', sUrl);
UpdateCss();
return false;
}
/**
* check query params and insert css code for the demo
* @returns {undefined}
*/
function UpdateCss(){
var oSelType=document.getElementById('selType');
var oSelColor=document.getElementById('selColor');
var query = getQueryParams();
var sPreview='';
var sPlayerMore='';
clearCss();
if(query.type){
var cssfile='../skins/mcplayer-'+query.type.replace(/[^a-z\-]/g, '')+'.min.css';
var link=addCss(cssfile);
sPreview+='<strong>'+link.outerHTML.replace(/\</, '<')+'</strong><br> ';
// oSelType.value=query.type;
for ( var i = 0; i < oSelType.options.length; i++ ){
var oOption = oSelType.options[i];
if ( query.type.indexOf( oOption.value ) !== -1 ){
oOption.selected = true;
}
}
switch (query.type) {
case 'bottombar':
oMcPlayer.makeMainwindowMovable(false);
sPlayerMore+='<strong>oMcPlayer.makeMainwindowMovable(false);</strong>';
break;
default:
oMcPlayer.makeMainwindowMovable(true);
break;
}
} else {
oMcPlayer.makeMainwindowMovable(true);
}
if(query.skin){
var cssfile='../skins/mcplayer-'+query.skin.replace(/[^a-z\-]/g, '')+'.min.css';
var link=addCss(cssfile);
sPreview+='<strong>'+link.outerHTML.replace(/\</, '<')+'</strong>';
for ( var i = 0; i < oSelColor.options.length; i++ ){
var oOption = oSelColor.options[i];
if ( query.skin.indexOf( oOption.value ) !== -1 ){
oOption.selected = true;
}
}
}
document.getElementById('cssmore').innerHTML=sPreview;
document.getElementById('playermore').innerHTML=sPlayerMore;
}
/**
* reset css div
* @returns {undefined}
*/
function clearCss(){
var head = document.getElementById('morehead');
head.innerHTML='';
addCss('../mcplayer.min.css');
}
/**
* helper function to add a css line; it returns the link object
* @param {type} cssfile
* @returns {addCss.link|Element}
*/
function addCss(cssfile){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = cssfile;
link.media = 'screen';
var head = document.getElementById('morehead');
head.appendChild(link);
return link;
}
window.onload = function () {
UpdateCss();
}
</script>
<br /><br /><br /><br />
<hr>
DOCS: <a href="https://www.axel-hahn.de/docs/amcplayer/index.htm" target="_blank">https://www.axel-hahn.de/docs/amcplayer/index.htm</a>
</body>
</html>
|
Download
