Forum : Couper son video

Hello, si tu utilises la balises <video> en HTML pour tes vidéos, tu as toujours la possibilité d'utiliser l'attribut muted (https://developer.mozilla.org/fr/docs/Web/HTML/Element/video#attr-muted).

Ensuite, via ton javascript, tu veux lui ajouter ou non cet attribut.

const videoActive = document.getQuerySelector("video");
// Mute la vidéo
videoActive.muted = true;
// Unmute la vidéo
videoActive.muted = false;

Bien entendu, à adapter en fonction de ton code HTML.

En résumé, tu récupère la liste des vidéos, tu les mute toutes. Ensuite, tu met ou non en route la première vidéo et tu l'unmute au passage.
Lorsque tu changes de vidéo, tu remute tout et tu unmute celle qui est active.

Daniel SIAUVE

Auteur

Bonjour Kareylo et merci pour ton retour.
Désolé mais mon niveau de connaissance sur JS ne me petrmet pas de mettre en oeuvre tes recommendations.

Je me permet donc de te joindre les lignes, de ma page HTML, relative à mon pb :

<center>
  <h2><a class="titresection" href="Vacances.html">Retour sur les photos de nos vacances</a></h2>
  <div class="cadre-slider">
    <div class="galerie">
      <video id="slide1"  poster="video/poster_video.jpg" controls >
        <source src="video/arrivee.mp4" type="video/mp4" >
      </video>
      <video id="slide2"  poster="video/poster_video.jpg" controls >
        <source src="video/sortie_bateau.mp4" type="video/mp4" >
      </video>
    </div>
    <ul class="ancre">
      <li><a href="#slide1" title="Notre arrivée" id="video1">1</a></li>
      <li><a href="#slide2" title="La sortie fluviale" id="video2">2</a></li>
    </ul>
  </div>
</center>

Par avance merci por toute l'aide que tu pourras m'apporter.
Bien à toi.
Daniel

Kareylo

Alors, j'ai fait très vite, d'autres diront que j'ai pas fait de la bonne manière, mais ça a le mérite de fonctionner :

function muteAll() {
  const videos = document.querySelectorAll("video");

  videos.forEach(video => {
    // On mute les vidéos
    video.muted = true;
  });
}

function unmuteSelected(element) {
    muteAll();
  element.muted = false;
}

// On force à tout muter au lancement de la page
muteAll();

// On récupère tous les liens
document.querySelectorAll("ul.ancre li a").forEach(link => {
    // Pour chaque lien, on lui ajoute une écoute de l'événement "Click"
  link.addEventListener("click", (event) => {
    // On ignore l'événement click par défaut (qui consiste à changer de page ici)
    event.preventDefault();

    // On récupère la valeur de href
    let selected = link.href;

    // Si on a un href du style : https://monsite.fr/#slide1, on récupère uniquement le "#slide1"
    if (selected.indexOf('#') > 0 && selected.indexOf('#') !== -1)
    {
        const split = selected.split('#');
        selected = "#" + split[1];
    }

    // On unmute l'élément voulu
    unmuteSelected(document.querySelector(selected));
  });
});

Daniel SIAUVE

Auteur

Merci bcp pour ton investissement.

Je m'attele à mettre cela en service.

Bonne soirée.
Daniel.

Daniel SIAUVE

Auteur

Bonjour Kareylo.

Désolé mais aprés avoir intégrer un fichier JS dans le <head> de mon fichier HTML, c'est à dire :

  <!doctype html>
  <html lang="fr">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-witch, initial-scale=1.0">
  <title>Ma page</title>
  <script type="application/javascript" src="scrollJquery/video_mute.js" > </script>

relatif aux éléments que tu ma fournis, cela ne fct toujours pas => même pb.

(Rem : video_mute est le nom de ton fichier JS, copie conforme)

Pour info au démarrage, au chargement, de ma page le son de la vidéo est au maximum (curseur sur position volume haut).

Je doit etre une "truffe" car cela fait plusieurs heures que j'essais de comprendre ton JS et de l'intégrer pour qu'il fct mais je n'y arrive pas.
Est ce que je peux te solliciter encore une fois?

Sinon, dans tout les cas merci pour ta patience.

Bien à toi.
Daniel.

Kareylo

Hello,

Désolé du temps de réponse, mais la solution reste assez facile, mais on y pense pas toujours.
Tu as trois solutions :

Mettre ta balise script juste avant la fermeture de ta balise body au lieu de le mettre dans ta balise head
```
...
<script type="application/javascript" src="scrollJquery/video_mute.js" > </script>
</body>
```
Utiliser un événement onload dans le script js :

windows.onload = () => {
    // Le code JS (ou l'appel d'une fonctione déclarée);
}

OU

document.addEventListener("DOMContentLoaded", () => {
    // Le code JS (ou l'appel d'une fonctione déclarée);
});

Utiliser l'attribut "defer" dans ta balise script, ce qui permet de dire au navigateur de charger le js à la fin du chargement de la page

Daniel SIAUVE

Auteur

Bonjour Kareylo.
Pas de soucis pour le delais, cela est déjà trés gentil de prendre du temps pour m'aider.

J'ai testé toutes tes solutions, tes recommendations et malheuresement aucunes ne fonctionnent. (Dégouté)

Tout ce comporte comme si la sélection de ma vidéo (en cliquant sur le bouton 1 ou le 2) n'etait pas prise en compte => Pas de mute de la vidéo précédement sélectionnée)

Je me permet de t'afficher ma page au complet :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-witch, initial-scale=1.0">
<title>Mes Videos</title>
<script type="application/javascript" src="scripts/mute_videos.js"></script>
<style>
{
box-sizing: border-box
}
body {
margin: 0px;
min-height: 100vh;
display: flex;
flex-flow: column;
padding: 20px
}
ul {
list-style-type: none;
padding: 0;
margin: 0
}
video {
max-width: 100%;
display: block
}
.cadre-slider {
margin: auto;
}
.galerie {
margin: 50px;
max-width: 900px;
max-height: 600px;
display: flex;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory
}
.galerie video {
min-width: 100%;
align-self: center; /pour le responsive/
scroll-snap-align: center;
}
.ancre {
margin: 1rem auto;
display: flex;
justify-content: center;
}
.ancre li {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background: #404040;
border-radius: 50%;
}
.ancre li a {
color: white
}
.ancre li:not(:last-child) {
margin-right: 30px;
}
.ancre li a:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<center>
<div class="cadre-slider">
<div class="galerie">
<video id="slide1" poster="video/poster_video.jpg" controls >
<source src="video/MGM.mp4" type="video/mp4" >
</video>
<video id="slide2" poster="video/poster_video.jpg" controls >
<source src="video/Fox.mp4" type="video/mp4" >
</video>
</div>
<ul class="ancre">
<li><a href="#slide1" title="Jingle MGM" id="video1">1</a></li>
<li><a href="#slide2" title="Jingle 20th Cebtery Fox" id="video2">2</a></li>
</ul>
</div>
</center>
</body>
</html>
</head>
<body>
<center>
<div class="cadre-slider">
<div class="galerie">
<video id="slide1" poster="video/poster_video.jpg" controls >
<source src="video/MGM.mp4" type="video/mp4" >
</video>
<video id="slide2" poster="video/poster_video.jpg" controls >
<source src="video/Fox.mp4" type="video/mp4" >
</video>
</div>
<ul class="ancre">
<li><a href="#slide1" title="Jingle MGM" id="video1">1</a></li>
<li><a href="#slide2" title="Jingle 20th Cebtery Fox" id="video2">2</a></li>
</ul>
</div>
</center>
</body>
</html>

Encore un fois je te remercie par avance, si tu peux. Sorry.

Bien à toi.
Daniel.

Kareylo

Alors, essaie de remplacer le contenu du fichier js par le suivant :


function muteAll() {
  const videos = document.querySelectorAll("video");

  videos.forEach(video => {
    // On mute les vidéos
    video.muted = true;
  });
}

function unmuteSelected(element) {
    muteAll();
  element.muted = false;
}

windows.onload = () => {
    // On force à tout muter au lancement de la page
    muteAll();

    // On récupère tous les liens
    document.querySelectorAll("ul.ancre li a").forEach(link => {
        // Pour chaque lien, on lui ajoute une écoute de l'événement "Click"
      link.addEventListener("click", (event) => {
        // On ignore l'événement click par défaut (qui consiste à changer de page ici)
        event.preventDefault();

        // On récupère la valeur de href
        let selected = link.href;

        // Si on a un href du style : https://monsite.fr/#slide1, on récupère uniquement le "#slide1"
        if (selected.indexOf('#') > 0 && selected.indexOf('#') !== -1)
        {
            const split = selected.split('#');
            selected = "#" + split[1];
        }

        // On unmute l'élément voulu
        unmuteSelected(document.querySelector(selected));
      });
    });
}

Deplus, l'HTML que tu m'as fourni n'est pas correct, tu as deux fois le contenu.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-witch, initial-scale=1.0">
        <title>Mes Videos</title>
        <script type="application/javascript" src="scripts/mute_videos.js"></script>
        <style>
            {
                box-sizing: border-box
            }
            body {
                margin: 0px;
                min-height: 100vh;
                display: flex;
                flex-flow: column;
                padding: 20px
            }
            ul {
                list-style-type: none;
                padding: 0;
                margin: 0
            }
            video {
                max-width: 100%;
                display: block
            }
            .cadre-slider {
                margin: auto;
            }
            .galerie {
                margin: 50px;
                max-width: 900px;
                max-height: 600px;
                display: flex;
                overflow-y: hidden;
                scroll-behavior: smooth;
                scroll-snap-type: x mandatory
            }
            .galerie video {
                min-width: 100%;
                align-self: center; /pour le responsive/
                scroll-snap-align: center;
            }
            .ancre {
                margin: 1rem auto;
                display: flex;
                justify-content: center;
            }
            .ancre li {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 30px;
                height: 30px;
                background: #404040;
                border-radius: 50%;
            }
            .ancre li a {
                color: white
            }
            .ancre li:not(:last-child) {
                margin-right: 30px;
            }
            .ancre li a:hover {
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <center>
            <div class="cadre-slider">
                <div class="galerie">
                    <video id="slide1" poster="video/poster_video.jpg" controls >
                        <source src="video/MGM.mp4" type="video/mp4" >
                    </video>
                    <video id="slide2" poster="video/poster_video.jpg" controls >
                        <source src="video/Fox.mp4" type="video/mp4" >
                    </video>
                </div>
                <ul class="ancre">
                    <li><a href="#slide1" title="Jingle MGM" id="video1">1</a></li>
                    <li><a href="#slide2" title="Jingle 20th Cebtery Fox" id="video2">2</a></li>
                </ul>
            </div>
        </center>
    </body>
</html>

Daniel SIAUVE

Auteur

Bonsoir Kareylo.

Tu as raison pour le HTML, lors de mon copier/coller je n'ai pas fait attention, mais ma page HTML est correcte et correspond à ce que tu m'indiques.

Cependant tj même pb avec ton nouveau JS et même en essayant les trois possibilités que tu m'as donné plus haut.

Cependant une information, alerte, que me donne Dreamweaver dans le JS sur la ligne :

windows.onload = () => {
    // On force à tout muter au lancement de la page
    muteAll();

qui est => ERROR : 'windows' is not defined.

Voilà si cela te parles, sinon je ne vais pas te solliciter encore et je scinderai ma page afin de pouvoir visualiser les vidéos sur deux pages distinctes.

Dans tout les cas merci beaucoup.

Bien à toi.
Daniel.

Kareylo

Oula, j'ai vraiment mis "windows.onload"...

C'est "window.onload", pas "windows.onload"

Désolé

Daniel SIAUVE

Auteur

Bonjour, merci pour ton retour et il n'y a aucun pb car comme dit le proverbe " Il n'y a que ceux qui ne font rien qui ne commette pas d'erreur."

Sans le "S" plus d'erreur annocé par DW.

Cependant comportement bizarre, aprés correction du JS :
• Les bts de choix, 1 et 2, ne sont plus fonctionnels
• Le choix de la vidéo ne peut se faire que par le curseur de la partie d'affichage vidéo
• Le son se coupe bien après avoir lancé une vidéo en passant de l'une à l'autre mais la vidéo souhaitée ne s'affiche pas.

zgzbsez

J'ai la même question et c'est là que je télécharge régulièrement les sonneries gratuites que vous recherchez: suonerie per cellulari

Daniel SIAUVE

Auteur

Bonjour à tous.
Voic la solution que l'on m'a proposé en JS et qui me convient bien :

// JavaScript Document
document.addEventListener("play", function(evt) {
if(this.$AudioPlaying && this.$AudioPlaying !== evt.target) {
this.$AudioPlaying.pause();
}
this.$AudioPlaying = evt.target;
}, true);

Merci Bogota.

Couper son video

10 réponses