Radionomy - Board
https://board.radionomy.com/

[SITE WEB] Intégrer plusieurs players sur une page web
https://board.radionomy.com/viewtopic.php?f=8&t=16841
Page 1 of 1

Author:  Domi [ Tue Oct 13, 2015 3:12 am ]
Post subject:  [SITE WEB] Intégrer plusieurs players sur une page web

Radionomy fournit 3 différents modèles de player intégrable sur votre site web, à savoir :

Medium 300x389 px
Attachment:
01_medium.PNG
01_medium.PNG [ 131.46 KiB | Viewed 7182 times ]


Mobile 320x90 px
Attachment:
02_mobile.PNG
02_mobile.PNG [ 46.14 KiB | Viewed 7182 times ]


Horizontal 728x90 px
Attachment:
03_horizontal.PNG
03_horizontal.PNG [ 22.9 KiB | Viewed 7182 times ]


Vous les trouverez sur le site Radionomy : https://www.radionomy.com/en/radio/your-radioname
Attachment:
04_Player exportable.png
04_Player exportable.png [ 16.35 KiB | Viewed 7182 times ]



Comment intégrer plusieurs players sur une seule page web (CSS) ?
Ci-dessous, 3 exemples d'intégration du code :

Copiez le code de votre choix et ajoutez le dans votre propre table de code : <th>script</th>
Afin d'intégrer plusieurs players, vous devez définir un ID propre à chaque player. (en rouge sur l'image)

  • Player 1 ID is "radplayer1"
  • Player 2 ID is "radplayer2"
  • Player 3 ID is "radplayer3"
  • Player 4 ID is "radplayer4"
  • etc., etc.
Attachment:
05_Script.PNG
05_Script.PNG [ 90.19 KiB | Viewed 7182 times ]


3 players de type "medium" disposés comme suit :

Attachment:
06_players-medium.PNG
06_players-medium.PNG [ 105.81 KiB | Viewed 7182 times ]


Demo: https://radionostalgia.nu/demo/players-medium.html

Code source avec script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }

}
</style>
</head>
<body>

<table>
  <tr>
    <th><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer1'));
radplayer1('url', 'radio-nostalgia');
radplayer1('type', 'medium');
radplayer1('autoplay', '0');
radplayer1('volume', '50');
radplayer1('color1', '#000000');
radplayer1('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></th>
    <th><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer2'));
radplayer2('url', 'radio-tijdloos');
radplayer2('type', 'medium');
radplayer2('autoplay', '0');
radplayer2('volume', '50');
radplayer2('color1', '#000000');
radplayer2('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></th>
    <th><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer3'));
radplayer3('url', 'studio-ant');
radplayer3('type', 'medium');
radplayer3('autoplay', '0');
radplayer3('volume', '50');
radplayer3('color1', '#000000');
radplayer3('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>

</table>

</body>
</html>


Code source sans script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }

}
</style>
</head>
<body>

<table>
  <tr>
    <th></th>
    <th></th>
    <th></td>
  </tr>

</table>

</body>
</html>


4 players de type "mobile" disposés comme suit :
Attachment:
07_players-mobile.PNG
07_players-mobile.PNG [ 63.64 KiB | Viewed 7182 times ]


Demo: https://radionostalgia.nu/demo/players-mobile.html

Code source avec script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }
}
</style>
</head>
<body>

<table>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer1'));
radplayer1('url', 'radio-nostalgia');
radplayer1('type', 'mobile');
radplayer1('autoplay', '0');
radplayer1('volume', '50');
radplayer1('color1', '#000000');
radplayer1('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer2'));
radplayer2('url', 'radio-tijdloos');
radplayer2('type', 'mobile');
radplayer2('autoplay', '0');
radplayer2('volume', '50');
radplayer2('color1', '#000000');
radplayer2('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer3'));
radplayer3('url', 'studio-ant');
radplayer3('type', 'mobile');
radplayer3('autoplay', '0');
radplayer3('volume', '50');
radplayer3('color1', '#000000');
radplayer3('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer4'));
radplayer4('url', 'radiotuto');
radplayer4('type', 'mobile');
radplayer4('autoplay', '0');
radplayer4('volume', '50');
radplayer4('color1', '#000000');
radplayer4('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
</table>

</body>
</html>


Code source sans script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }
}
</style>
</head>
<body>

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

</body>
</html>


4 players de type "horizontal" disposés comme suit :
Attachment:
08_players-horizontal.PNG
08_players-horizontal.PNG [ 93.89 KiB | Viewed 7182 times ]


Demo: https://radionostalgia.nu/demo/players-horizontal.html

Code source avec script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }
}
</style>
</head>
<body>

<table>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer1'));
radplayer1('url', 'radio-nostalgia');
radplayer1('type', 'horizontal');
radplayer1('autoplay', '0');
radplayer1('volume', '50');
radplayer1('color1', '#000000');
radplayer1('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer2'));
radplayer2('url', 'radio-tijdloos');
radplayer2('type', 'horizontal');
radplayer2('autoplay', '0');
radplayer2('volume', '50');
radplayer2('color1', '#000000');
radplayer2('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer3'));
radplayer3('url', 'studio-ant');
radplayer3('type', 'horizontal');
radplayer3('autoplay', '0');
radplayer3('volume', '50');
radplayer3('color1', '#000000');
radplayer3('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer4'));
radplayer4('url', 'radiotuto');
radplayer4('type', 'horizontal');
radplayer4('autoplay', '0');
radplayer4('volume', '50');
radplayer4('color1', '#000000');
radplayer4('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
</table>

</body>
</html>


Code source sans script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }
}
</style>
</head>
<body>

<table>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><</td>
  </tr>
</table>

</body>
</html>

Page 1 of 1 All times are UTC
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/