Code Visuel(mp3 player) Html CSS et java |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
leobensalem
Newbie Depuis le: 21 Jan 2017 Status: Inactif Points: 3 |
Options des messages
Thanks(0)
Envoyé : 21 Jan 2017 à 19:20 |
Bonjour, j'ai un problème, j'ai un lecteur mp3 qui fonctionne très bien mais dès que j'insert le code HTML en mode code visuel, le lecteur s'affiche mais impossible de lire les fichiers et impossible le déclancher, j'ai l'impression que certaines fonctions du JAVA ne sont pas prises en compte....pourquoi ??
A noter que le lecteur fonctionne très bien quand j'insert le code HTML en code Source...mais ça s'affiche en tête de site, et je ne souhaite pas que ça s'affiche à cet endroit, je veux placer le code HTML dans un panneau d'élément, merci pour votre aide voilà une capture d'écran pour vous montrer ou le lecteur s'affiche en code source: http://www.hostingpics.net/viewer.php?id=327949codesource.jpg Et la une image pour vous montrer ou je souhaite qu'il s'affiche, mais il est inactif, impossible de lire les fichers... http://www.hostingpics.net/viewer.php?id=386244codevisuel.jpg voilà le code: HTML: <!-- jade: compressed--> <ul class="audio-players"> <li> <div class="audio-player js-audio-player"> <button class="audio-player__control js-control"> <div class="audio-player__control-icon"></div> </button> <h4 class="audio-player__title">To Night</h4> <audio preload="auto"> <source src="Files/Audio/To Night.mp3"/> </audio><img class="audio-player__cover" src="Files/Image/9fecec53f9d1322a2c34ff659b2887550000.png"/> <video preload="auto" loop="loop"> <source src="Files/Video/audio-waves.mp4" type="video/mp4"/> </video> </div> </li> <li> <div class="audio-player js-audio-player"> <button class="audio-player__control js-control"> <div class="audio-player__control-icon"></div> </button> <h3 class="audio-player__title">Audio Clip Two</h3> <audio preload="auto"> <source src="http://pd.npr.org/anon.npr-mp3/npr/ama/2016/06/20160607_ama_bandbonus.mp3"/> </audio><img class="audio-player__cover" src="https://unsplash.it/g/300/?image=48"/> <video preload="auto" loop="loop"> <source src="Files/Video/audio-waves.mp4" type="video/mp4"/> </video> </div> </li> <li> <div class="audio-player js-audio-player"> <button class="audio-player__control js-control"> <div class="audio-player__control-icon"></div> </button> <h3 class="audio-player__title">Audio Clip 4</h3> <audio preload="auto"> <source src="Files/Audio/Black room.mp3"/> </audio><img class="audio-player__cover" src="Files/Image/9fecec53f9d1322a2c34ff659b2887550000.png"/> <video preload="auto" loop="loop"> <source src="Files/Video/audio-waves.mp4" type="video/mp4"/> </video> </div> </li> <li> <div class="audio-player js-audio-player"> <button class="audio-player__control js-control"> <div class="audio-player__control-icon"></div> </button> <h3 class="audio-player__title">Audio Clip Three</h3> <audio preload="auto"> <source src="http://pd.npr.org/anon.npr-mp3/npr/pchh/2016/08/20160801_pchh_mtv.mp3"/> </audio><img class="audio-player__cover" src="https://unsplash.it/g/300/?image=43"/> <video preload="auto" loop="loop"> <source src="Files/Video/audio-waves.mp4" type="video/mp4"/> </video> </div> </li> </ul> CSS: *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; } body { font-family: sans-serif; margin: 0; bottom : 0; width: 100%; } img, video { max-width: 100%; height: auto; } .audio-player { position: relative; width: 100%; height: 0; text-align: center; padding-bottom: 100%; background-color: #7726e4; } .audio-player video { opacity: 0; -webkit-transition: opacity 300ms; transition: opacity 300ms; will-change: opacity; } .audio-player:focus .audio-player__cover, .audio-player:hover .audio-player__cover, .audio-player.is-playing .audio-player__cover { opacity: 0.35; } .audio-player:focus .audio-player__title, .audio-player:hover .audio-player__title, .audio-player.is-playing .audio-player__title { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .audio-player:focus .audio-player__control-icon, .audio-player:hover .audio-player__control-icon, .audio-player.is-playing .audio-player__control-icon { -webkit-transform: scale(1.15); transform: scale(1.15); } .audio-player.is-playing .audio-player__cover { opacity: 0; } .audio-player.is-playing video { opacity: 1; } .audio-player.is-playing .audio-player__control-icon:before { -webkit-transform: translateY(0); transform: translateY(0); } .audio-player.is-playing .audio-player__control-icon:after { -webkit-transform: translateY(50px); transform: translateY(50px); } .audio-player__cover { position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-transition: opacity 350ms; transition: opacity 350ms; will-change: opacity; } .audio-player__title { position: absolute; color: #fff; font-size: 22px; font-weight: 500; left: 10px; right: 10px; bottom: 0; top: 50%; padding-top: 50px; -webkit-transform: translateY(-5%); transform: translateY(-5%); z-index: 10; opacity: 0; -webkit-transition: all 300ms; transition: all 300ms; will-change: transform, opacity; } .audio-player__control { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; z-index: 20; border: none; background: none; cursor: pointer; } .audio-player__control:focus { outline: none; } .audio-player__control-icon { position: absolute; width: 65px; height: 65px; border-radius: 50%; border: 3px solid #fff; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: hidden; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; -webkit-transform: scale(1); transform: scale(1); will-change: transform; } .audio-player__control-icon::after, .audio-player__control-icon::before { -webkit-transition: all 200ms; transition: all 200ms; will-change: transform; content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .audio-player__control-icon::after { left: 5px; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 20px solid #fff; -webkit-transform: translateY(0); transform: translateY(0); } .audio-player__control-icon::before { width: 15px; height: 30px; border-right: 6px solid #fff; border-left: 6px solid #fff; -webkit-transform: translateY(-50px); transform: translateY(-50px); } .audio-players { list-style: none; margin: 0; padding: 0; text-align: center; } .audio-players li { display: inline-block; vertical-align: top; max-width: 300px; margin: 20px; } JAVA: var $player = $('.js-audio-player') , $playbackClass = 'is-playing' , $fadeDuration = 500 $player.each(function(index) { var $this = $(this) , id = 'audio-player-' + index $this.attr('id', id) $this.find('.js-control')[0].addEventListener('click', function() { resetPlayback(id) playback($this, $this.find('audio'), $this.find('video')) }) // Reset state once audio has finished playing $this.find('audio')[0].addEventListener('ended', function() { resetPlayback() }) }) function playback($player, $audio, $video) { if ($audio[0].paused) { $audio[0].play() $video[0].play() $audio.animate({ volume: 1 }, $fadeDuration) $player.addClass($playbackClass) } else { $audio.animate({ volume: 0 }, $fadeDuration, function() { $audio[0].pause() $video[0].pause() }) $player.removeClass($playbackClass) } } function resetPlayback(id) { $player.each(function() { var $this = $(this) if ($this.attr('id') !== id) { $this.find('audio').animate({ volume: 0 }, $fadeDuration, function() { $(this)[0].pause() $this.find('video')[0].pause() }) $this.removeClass($playbackClass) } }) } |
|
leobensalem
Newbie Depuis le: 21 Jan 2017 Status: Inactif Points: 3 |
Options des messages
Thanks(0)
|
Solution trouvée!!!! j'ai placé le JAVA dans un fichier externe et je suis allé le chercher avec la balise
<script type="text/javascript" src="lecteur.js"></script> Merci quand même :p
|
|
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |