Couper son video

Par Daniel SIAUVE, il y a 3 ans

Les bases HTML/CSS

Décrivez ici votre problème ou ce que vous cherchez à faire.

Bonsoir à tous.
Je suis en train de créer un site Web familiale et sur une page je souhaite, comme pour un diaporama de photo, avoir différentes vidéos (avec leurs sons réciproques) et n'avoir que celui de la vidéo consultée.
Donc comment n'avoir que le son de la vidéo sélectionnée ?
Par avance merci pour toute l'aide que vous pourrez m'accorder.
Bien à vous.

Ce que je veux

Ma page est réalisée mais en cliquant sur le bouton, numéro de la vidéo à visualiser, j'entends toujours le son de la précédente. Tests réalisés sous Firefox, Chrome et Edge Chromium, tous en dernière version (Je suis sous Win 11 et j'utilise Dreamweaver)

Ce que j'obtiens
Un "brouhaha" si je ne mets pas les vidéos précédemment visualisées en pause.

13 réponses

Kareylo, il y a 3 ans

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.

zgzbsez, il y a 3 ans

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, il y a 3 ans

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, il y a 3 ans

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, il y a 3 ans

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.

Daniel SIAUVE, il y a 3 ans

Merci bcp pour ton investissement.

Je m'attele à mettre cela en service.

Bonne soirée.
Daniel.

Daniel SIAUVE, il y a 3 ans

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, il y a 3 ans

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, il y a 3 ans

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, il y a 3 ans

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>
Kareylo, il y a 3 ans

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

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

Désolé

Daniel SIAUVE, il y a 3 ans

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.

Daniel SIAUVE, il y a 3 ans

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.