logo Debian Debian Debian-France Debian-Facile Debian-fr.org Forum-Debian.fr Debian ? Communautés logo inclusivité

Debian-facile

Bienvenue sur Debian-Facile, site d'aide pour les nouveaux utilisateurs de Debian.

Vous n'êtes pas identifié(e).

#1 20-12-2022 20:01:35

potemkine17
Membre
Distrib. : Débian Bookworm Cinnamon
Noyau : amd64
Inscription : 17-09-2014

Erreur de code ???(clos)

Bonsoir,
je souhaiterais insérer une lecteur vidéo/audio avec une play-list sur une simple page HTML qui aurait une vidéo en fond d'écran. Je n'ai pas eu trop de difficultés à coder ça et j'ai un bon rendu sur mes pc de bureau. mais pas sur mon portable sur l'écran duquel une ombre grise s'affiche de chaque côté du lecteur, masquant en parti le fond d'écran. C'est peut-être un simple problème de résolution et de média quéries mais c'est peut-être autre chose, du à mon code "tarabiscoté". Si vous avez une idée, faites-moi en part. Merci d'avance

rFBhzA.png

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="xx.css">
    <script type="text/javascript"></script>
    <title>Amy Winehouse</title>
</head>
  <body style="">
    <div class="contener-flex">
      <div class="button0"> <input name="bouton" value="retour" onclick="window.location.href=`page1z.html`"
type="button"> </div>
<br>
<br>
<Br>
<br>
<figure id="video_player">
  <video controls poster="images/aw.jpg">
    <source src="clips/aw1.mp3" type="audio/mp3">
    <source src="clips/aw2.mp3" type="audio/mp3">
   
  </video>
  <figcaption>
    <a href="clips/aw1.mp3"><img src="images/aw1.jpg" alt=""></a>
    <a href="clips/aw2.mp3"><img src="images/aw2.jpg" alt=""></a>

  </figcaption>
</figure>

  <video class="bgvid" autoplay="autoplay" loop="" poster="aw.jpg" id="bgvid">
      <source src="webm/aw.webm" type="video/webm"> </video>

   </body>
 
</html>
 



media screen and (min-width: 980px){
    .conteneur-flex{
        flex-flow: row wrap;
    }

.bgvid {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto;  height: auto; z-index: -100;
  background: url(aw.webm) no-repeat;
  background-size: cover;
}

.conteneur-flex{
    display: flex;
    flex-flow: column wrap;
    margin: 10px;
}

.button0 {
   float: left;
   padding-right: 20px;
}  
figure
{
  display: block;
  margin: 0 auto auto;
}

#video_player {
  display: table;
  line-height: 0;
  font-size: 0;
  background: #000;
}
#video_player video,
  #video_player figcaption {
    display: table-cell;
    vertical-align: middle;
}
#video_player figcaption {
  width: 25%;
}
#video_player figcaption a {
  display: block;
  opacity: .5;
  transition: 1s opacity;
}
#video_player figcaption a img,
  figure video {
    width: 100%;
    height: auto;
}
#video_player figcaption a:hover {
  opacity: 1;
}
@media (max-width: 700px) {
  #video_player video,
    #video_player figcaption {
      display: table-row;
    }
video_player figcaption a {
  display: inline-block;
  width: 33.33%;
}
}

Dernière modification par potemkine17 (30-12-2022 13:01:36)

Hors ligne

#2 20-12-2022 22:25:13

VBrice
Membre
Inscription : 04-10-2021

Re : Erreur de code ???(clos)

Bonjour,

il te manque un balise fermente d'une <DIV> dans ton code html.

Il n'y a pas d'autre feuille de style à nous montrer?

Quel navigateur utilise tu?

Hors ligne

#3 21-12-2022 09:21:09

potemkine17
Membre
Distrib. : Débian Bookworm Cinnamon
Noyau : amd64
Inscription : 17-09-2014

Re : Erreur de code ???(clos)

Bonjour VBrice,
Merci de ton aide.

il te manque un balise fermente d'une <DIV> dans ton code html.


Exact, grosse étourderie de ma part. J'ai du la supprimer en modifiant le fichier. Mais cela n'a fait qu'"aggraver" le problème, l'ombre grise s'étend maintenant au-dessus du lecteur. Je viens de tester plusieurs positionnement possible de cette <div>, sans résultat. Y compris en la virant.

Il n'y a pas d'autre feuille de style à nous montrer?


Ce fichier fait suite à un autre dans un dossier-parent, affichant lui-aussi une vidéo en fond d'écran et un (petit) menu comportant le lien vers cette page. J'avais eu là-aussi ce soucis d'ombre mais j'avais pu le rectifier facilement. La solution  ne semble pas marcher pour un lecteur.

Quel navigateur utilise tu?

F.F. Et c'est peut-être aussi une piste car je viens de tester sur Falkon et la page s'affiche sans problème.
Je vais essayer d'autres supports et voir si c'est Mozilla qu'il faut paramétrer.

Hors ligne

#4 21-12-2022 21:34:06

VBrice
Membre
Inscription : 04-10-2021

Re : Erreur de code ???(clos)

Il nous manque des élément si tu veux qu'on puisse t'aider.

Par exemple, la couleur #181A1B (ou RGB 24,26,27) n'est pas présent dans le css. Ca serait bien de nous fournir le fichier css dans le dossier-parent pour qu'on puisse investigué.

Hors ligne

#5 22-12-2022 06:57:33

Anonyme-14
Invité

Re : Erreur de code ???(clos)

Salut,
erreur sur
fichier html contener-flex
fichier css  conteneur-flex
tu fermes div à la fin du conteneur

#6 22-12-2022 20:21:19

potemkine17
Membre
Distrib. : Débian Bookworm Cinnamon
Noyau : amd64
Inscription : 17-09-2014

Re : Erreur de code ???(clos)

Bonsoir et merci de vos retour.

VBrice a écrit:

la couleur #181A1B (ou RGB 24,26,27) n'est pas présent dans le css.


Tu veux parler de la teinte de l'ombre ???

Anonyme-14 a écrit:

erreur sur
fichier html contener-flex
fichier css  conteneur-flex


j'ai bâti ce code à partir de mes "cours" auprès d'Open Classroom. Mais je n'ai pas tout saisi et aussi retenu ce qui m'a été enseigné. Aussi, vu mon niveau, pourrais-tu m'éclairer sur ces erreurs ?
J'ai trouvé une piste du côté du navigateur. Sur W10 (en v.m.) et sur ce portable, Edge et Chrome affiche correctement la page ainsi que FireFox qui pose problème dans le pc hôte.. C'est donc lui le problème. Exécute-il mal le code parce qu'il contient des erreurs ? Ou faut-il le paramétrer (about:config...quelque chose) ?
A tout hasard le code des fichiers parents :

esheet" href="one.css">
    <script type="text/javascript"></script>
    <title>BLUES/JAZZ</title>

  </head>
  <body style="">
    <div class="contener-flex">
      <div class="button0"> <input name="bouton" value="RETOUR" onclick="window.location.href=`../../page5a.html`"
type="button"> </div>
      <div class="menu" style=" width: 280px; height: 170px; margin-left: 80px;
     margin-top: 25px; text-align: center; background-color: rgb(0, 255, 0, 0.2);">

      <nav>
          <p class="title2" style="list-style: outside none none; text-align: center; width: 210px; font-size: 19px; font-style: italic; font-weight: bold; margin-left: 37px; margin-top: 6px; height: 25px; padding: 2px;">
            Clips & Singles</p>
         <ul class="button1">
           <li>
             <ul class="article1" style="list-style: none; ">
                <li style="margin-left: -31px; margin-top: 2px; height: 20px;">
                  <ul class="submenu" style="width: 271px; margin-left: 0px;">
                    <li style="text-align: center; width: 144px; margin-left: -51px;"><a href="test.html">Amy Winehouse</a></li>
                    <br>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </body>
      <video class="bgvid" autoplay="autoplay" loop="" poster="bjz.jpg" id="bgvid">
        <source src="webm/bjz.webm" type="video/webm"> </video>
</html>
 


@media screen and (min-width: 980px){
    .conteneur-flex{
        flex-flow: row wrap;
    }

.bgvid {
  position: fixed; right: 0; bottom: 0;
  width: 100%; height: auto;
  background: url(p45.webm) no-repeat;
  background-size: cover;
  z-index: -1;
}
 body {
        background: url('bjz.jpg');
        background-size: cover;
    }

  }

.conteneur-flex{
    display: flex;
    flex-flow: column wrap;
    margin: 10px;
}

.button0 {
   float: left;
   padding-right: 20px;
}  

.menu
{
       float: right;
       margin-right: 150px;
       width: 280px;
       height: 670px;
       border-style: solid;
       border-color: #FF0000;
       border-radius: 10px;
       background-color: rgb(0, 255, 0, 0.4);
       padding-top: 30px;
}

Dernière modification par potemkine17 (23-12-2022 12:35:34)

Hors ligne

#7 22-12-2022 20:39:48

Anonyme-14
Invité

Re : Erreur de code ???(clos)

à chaque fois que tu écris contener dans un fichier et dans un autre fichier conteneur comment veux-tu que cela corresponde et quil y ait une interaction ? ou tu écris tout avec contener ou tu écris tout avec conteneur

#8 22-12-2022 21:44:40

potemkine17
Membre
Distrib. : Débian Bookworm Cinnamon
Noyau : amd64
Inscription : 17-09-2014

Re : Erreur de code ???(clos)

Étourderie de ma part. J'ai vraiment bâclé ce que j'ai fait. Je vais rectifier. Merci pour ta réponse.

Hors ligne

#9 23-12-2022 12:58:45

potemkine17
Membre
Distrib. : Débian Bookworm Cinnamon
Noyau : amd64
Inscription : 17-09-2014

Re : Erreur de code ???(clos)

Finalement le problème ne se rencontre que sur Firefox ESR. Sur l' "officiel", pas de soucis, le code (avant et après rectification) est accepté et l'affichage est bon. Je n'ai pas encore trouvé de renseignement sur internet sur des difficultés similaires mais j'y vois un peu plus clair. Mes recherches continuent...

Hors ligne

#10 23-12-2022 13:30:44

VBrice
Membre
Inscription : 04-10-2021

Re : Erreur de code ???(clos)

Si cela viens de Firefox ESR, il faut peut être attendre ca monté en version

Hors ligne

#11 23-12-2022 17:50:45

potemkine17
Membre
Distrib. : Débian Bookworm Cinnamon
Noyau : amd64
Inscription : 17-09-2014

Re : Erreur de code ???(clos)

Oui, c'est une solution. Reste à savoir pourquoi ce navigateur - celui que j'utilise par défaut- marche différement sur un pc portable.

Hors ligne

#12 23-12-2022 18:18:02

VBrice
Membre
Inscription : 04-10-2021

Re : Erreur de code ???(clos)

potemkine17 a écrit :

celui que j'utilise par défaut- marche différement sur un pc portable.


Sur un autre pc portable Firefox ESR fonctionne?

Hors ligne

#13 24-12-2022 11:51:46

potemkine17
Membre
Distrib. : Débian Bookworm Cinnamon
Noyau : amd64
Inscription : 17-09-2014

Re : Erreur de code ???(clos)

je n'ai pas pu faire ce test, n'ayant pas trouver de support Linux pour le faire. mais j'ai pu accéder à un Asus W3, où se trouvait une (très) ancienne version de F.F. installer sur un W10 périmé (ouf !) et  j'y ai rencontré le même soucis. Tu dois avoir raison, cela semble un problème de niveau du navigateur, actuellement 102 pour ESR contre 108 pour l'original. Mais c'est pas probant. Je n'ai pas beaucoup d'utilisateurs de Linux autour de moi et c'est galère pour confirmer. Il me faut du temps.

Hors ligne

#14 27-12-2022 14:31:18

potemkine17
Membre
Distrib. : Débian Bookworm Cinnamon
Noyau : amd64
Inscription : 17-09-2014

Re : Erreur de code ???(clos)

Sur un forum, il était signalé des problèmes graphiques de F.F.-esr sur les petits écrans  (celui de mon PC est de 14'') et il était joint un CSS censé régler le problème; Mais gaffeur que je suis, après avoir soigneusement enregisté les liens, j'ai....re-installé le navigateur. Et celà pour rien. Depuis, je l'ai testé  sur  Sparky-Linux (basé sur testing) et sur MX (sur stable) sans rencontrer de soucis. La version de Firefox était la même que pour Débian, mais la  prise en charge du matériel semble compter aussi. Je m'y perd un peu.

Hors ligne

#15 30-12-2022 13:00:42

potemkine17
Membre
Distrib. : Débian Bookworm Cinnamon
Noyau : amd64
Inscription : 17-09-2014

Re : Erreur de code ???(clos)

Comme le code fonctionne sur l'ensemble des systèmes testés, je ne pousse pas la recherche plus avant. Pour FF-esr, j'attends la mise-à-jour, j'ai d'autres supports à côté. Je passe en résolu.

Hors ligne

#16 01-01-2023 12:25:41

Anonyme-14
Invité

Re : Erreur de code ???(clos)

ajoutes ceci à ton css en plus de ce que tu as déjà et testes si l'affichage rend mieux.

@media screen and (max-width: 480px) {
  /* Styles pour les écrans de largeur inférieure à 480px */
  .menu {
    flex-direction: column;
    width: 100%;
  }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
  /* Styles pour les écrans de largeur comprise entre 480px et 768px */
  .menu {
    flex-direction: row;
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  /* Styles pour les écrans de largeur supérieure à 768px */
  .menu {
    flex-direction: row;
    width: 25%;
  }
}



et pour le fichier html tu pourrais peut-être t'inspirer de celui-ci

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="one.css">
    <title>BLUES/JAZZ</title>
  </head>
  <body>
    <div class="conteneur-flex">
      <div class="button0">
        <input name="bouton" value="RETOUR" onclick="window.location.href='../../page5a.html'" type="button">
      </div>
      <div class="menu" style="width: 280px; height: 170px; margin-left: 80px; margin-top: 25px; text-align: center; background-color: rgba(0, 255, 0, 0.2);">
        <nav>
          <p class="title2" style="list-style: outside none none; text-align: center; width: 210px; font-size: 19px; font-style: italic; font-weight: bold; margin-left: 37px; margin-top: 6px; height: 25px; padding: 2px;">
            Clips & Singles</p>
         <ul class="button1">
           <li>
             <ul class="article1" style="list-style: none;">
                <li style="margin-left: -31px; margin-top: 2px; height: 20px;">
                  <ul class="submenu" style="width: 271px; margin-left: 0px;">
                    <li style="text-align: center; width: 144px; margin-left: -51px;"><a href="test.html">Amy Winehouse</a></li>
                    <br>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <video class="bgvid" autoplay loop poster="bjz.jpg" id="bgvid">
      <source src="webm/bjz.webm" type="video/webm">
    </video>
  </body>
</html>

#17 02-01-2023 12:26:14

potemkine17
Membre
Distrib. : Débian Bookworm Cinnamon
Noyau : amd64
Inscription : 17-09-2014

Re : Erreur de code ???(clos)

Je teste ça et je te dis ce que ça donne.

Hors ligne

Pied de page des forums