demande à YounesDesign et qui peut aider
  • Vote Up0Vote Down tounsi9_4tounsi9_4
    Posts: 38Member
    Bonjour,

    je viens de voir le player utilisé par Nessradio sur sa version mobile pour iphone

    Comme j'utilise le même plugin (Obox) je voulais savoir si Younes (ou une autre personne) peut m'expliquer comme il a crée le player.

    Smile

    Merci
  • 3 Comments sorted by
  • Vote Up0Vote Down YounesDesignYounesDesign
    Posts: 62Member
    Salut!
    Je ne suis pas super fan d'Obox mobile car le Template a un conflit jPlayer et jQueryMobile... il faut attendre qu'ils mettent à jour leur système... j'en ai discuté avec eux et il sont un peu mou à la détente...
    Bref pour mon player iPhone j'ai utilisé la fonction <audio/>... si tu regardes dans les forums ils disent tous que c'est la plus "mobile compatible"...

    Donc pour le code:

    dans le <header/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$("#play-bt").click(function(){
			$("#audio-player")[0].play();
			$("#message").text("En lecture... veuillez patienter");
		})
 
		$("#pause-bt").click(function(){
			$("#audio-player")[0].pause();
			$("#message").text("La radio est en pause");
		})
 
		$("#stop-bt").click(function(){
			$("#audio-player")[0].pause();
			$("#audio-player")[0].currentTime = 0;
			$("#message").text("La radio est coup&eacute;e");
		})
	})
</script>


    dans ton <body/>
    <audio id="audio-player" name="audio-player" src="http://radio.nessradio.net:8000/nessradio.mp3" ></audio>


    dans ton CSS
    #message {
	
	background-color: #3a3c3d;
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
	width: 300px;
	font-size: 13px;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left:5px;
	padding: 5px;
	border-bottom-width: 1px;
	color:#d2d6db;
	
}

div#audio {
        display: none;
        overflow: hidden;
}


a.button,
a:hover.button {
	height: 20px;
	display: inline-block;
	margin: 0 5px 20px 5px;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	line-height: 12px;
	padding: 8px 10px 0 10px;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	   		border-radius: 3px;
	-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.08);
	   -moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.08);
    		box-shadow:0 1px 1px rgba(0, 0, 0, 0.08);
}

a:hover.button { background-position: 0 -28px; }
a:hover.button.large { background-position: 0 -35px; }

a.button.green {
	background-image: url(images/buttons/button_green.png);
	border: 1px solid #adc671;
	color: #5d7731!important;
	text-shadow: 0 1px 0 rgba(255,255,255, 0.4);
}

a.button.large.green { background-image: url(images/buttons/button_green_large.png); }
a:hover.button.green { border: 1px solid #8bb14d; }

a.button.red {
	background-image: url(images/buttons/button_red.png);
	border: 1px solid #df6f8b;
	color: #913944!important;
	text-shadow: 0 1px 0 rgba(255,255,255, 0.3);
}

a.button.large.red { background-image: url(images/buttons/button_red_large.png); }
a:hover.button.red { border: 1px solid #c36079; }

a.button.orange {
	background-image: url(images/buttons/button_orange.png);
	border: 1px solid #f5b74e;
	color: #996633!important;
	text-shadow: 0 1px 0 rgba(255,255,255, 0.4);
}

a.button.large.orange { background-image: url(images/buttons/button_orange_large.png); }
a:hover.button.orange { border: 1px solid #d29a3a; }


    bon courage!
    Listen to Ness Radio LIVE
    NESS RADIO
  • Vote Up0Vote Down tounsi9_4tounsi9_4
    Posts: 38Member
    Merci beacoup Younes

    est ce que tu peux juste me dire c'est dans qu'elle fichier que je dois ajouter le code dans ton poste

    Merci
  • Vote Up0Vote Down YounesDesignYounesDesign
    Posts: 62Member
    mmmm tout est dit il me semble... header / body / css
    Après je ne connais pas la structure de ton template...
    Listen to Ness Radio LIVE
    NESS RADIO
Add a Comment