Lecteur audio qui ne s'affiche pas

Résolu
lamontange Messages postés 130 Date d'inscription   Statut Membre Dernière intervention   -  
lamontange Messages postés 130 Date d'inscription   Statut Membre Dernière intervention   -

Bonsoir,

J'ai tenté plusieurs codes... impossible d'afficher un lecteur audio :(

Mon HTML :

<div id="test">
<div class="vertical">
<h2><up-text>ROCK</up-text></h2></div>
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p>
</audio></div>

et mes CSS :

audio{
background-color: black;
top: -50%;
position: absolute;
height: 200px;
}

QQ peut-il m'aider ?

Merci :)
Macintosh / Chrome 106.0.0.0

A voir également:

5 réponses

Réponse 1 / 5
Pitet
 

Bonjour,

Pourquoi une position absolute avec un top à -50% ? La balise audio doit se retrouver hors de l'écran.

https://jsfiddle.net/szdv71nj/
1
Réponse 2 / 5
lamontange Messages postés 130 Date d'inscription   Statut Membre Dernière intervention   6
 

Bonjour,

Une position absolute avec un top à -50% car j'avais un gros souci avec la div précédente.

Mais effectivement avec vos CSS, ce souci (avec la div précédente) n'existe pas non plus.

Le lecteur n'apparaît toujours pas.

Est-ce à cause de la classe (texte vertical allant de droite à gauche) ?

.vertical {
  position: absolute;
  left: 0; 
  top: 0;
  right: 0;
  bottom: 0;
  height:100%;

}
.vertical>h2{
  margin: 0;
  grid-column:1;
  overflow:hidden;
  transform: scale(-1); 
  font-size:15vw;
  color:ivory;
}
.vertical>h2> up-text{ 
  display:block;
  margin:auto 0;
  padding:0 ;
  z-index:10;
  writing-mode: vertical-rl;
  animation: slide 3s linear infinite; /*or*//*reverse*/
  height:100%;
}

Merci beaucoup
0
Réponse 3 / 5
lamontange Messages postés 130 Date d'inscription   Statut Membre Dernière intervention   6
 

Bonjour Pitet,

Toujours aucun lecteur. :(

Quoi de mieux que de voir l'exemple en ligne :

https://lapagetest.fr/termine/index.html

Merci beaucoup
0
Réponse 4 / 5
lamontange Messages postés 130 Date d'inscription   Statut Membre Dernière intervention   6
 

Bonjour Pitet,

Le lecteur s'affiche sur Firefox, et non sur Chrome :/

Le problème vient de là ;)

Second problème : le lecteur, là où je le veux placé ne fonctionne pas. Il fonctionne (lecture sur Firefox) dans les autres div.

Un rapport avec mes CSS ?

Bonne fin de journée.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
lamontange Messages postés 130 Date d'inscription   Statut Membre Dernière intervention   6
 

Bonjour Pitet,

J'avais ceci de caché dans mes CSS :

object, embed, canvas, video, audio {
     min-height:100%;
     border:0;
	 object-fit: cover;
	 width: auto;
	 object-position: center;
}

Il a fallu que j'y aille par élimination.

Merci et bonne journée :)
0

Discussions similaires

plus de lecture CD mais affichage de NO DISC
MAFA2627 -
kaumune -

7 réponses
pas de lecteur CD sur la voiture
coco -
coco -

2 réponses