Js baisser le volume d'une vidéo

11 janvier 2018 à 16:56:12

Bonjour, je souhaiterai baisser le volume de ma vidéo par du js et non par des boutons prés-fait de ce fait j'ai réaliser ce code :

	function load(){
				 var video = document.getElementById("Video1");
 			
		document.getElementById("volDn").addEventListener("click")
		{
				
				video.volume = video.volume - 0.1;

		};
		document.getElementById("volUp").addEventListener("click") 
		{
    		setVol(.1);  // up by 10%
		};
}

et mon code html :

<body onload="load();">
		<!-- LOGO -->
		<div id="entete">
			<div id="logo">
				<img src="photos/logo.jpg">
			</div>
		</div>
			<div id="nav">
				<?php
					include ('include/nav.php');
				?>
			</div>	
		<div id="video">
			
			<video id ="video1" src="video/test.mp4" poster="sintel.jpg" autoplay controls=""></video>
			
			<div id="buttonbar">
				<label>  Volume </label>
				<button id="volDn"  title="Volume down button">-</button>
            	<button id="volUp"  title="Volume up button">+</button>
			</div>
			
		</div>
		
	</body>

Le code js est inséré dans le head entre deux balise <script>.

Le problème avec ce que j'ai fait c'est que sa ne marche pas alors voulut un peut d'aide =)

ps : Je n'ai quasiment jamais toucher à JS

les erreurs les plus courentes sont les plus simples a éviter

Mewen_bzh

11 janvier 2018 à 17:13:46

Bonjour,

Pour commencer, la bonne pratique c'est de mettre les scripts dans un fichier js à part et d'appeler ce dernier à la fin de ton fichier HTML, juste avant la fermeture de la balise body.

En plaçant ton script dans le head tu risque d'avoir des problèmes car tu essayes d'agir sur des éléments avant que ces derniers ne soient chargés dans le DOM.

Je ne réponds pas aux messages privés.

sniteur

11 janvier 2018 à 17:25:41

Merci de ta réponse je vais essayer de séparer les fichiers. Je te tien au courant.

les erreurs les plus courentes sont les plus simples a éviter

AliasDmc

11 janvier 2018 à 19:21:07

Bonjour,

Essayes :

function load(){
    document.getElementById("volDn").addEventListener("click"){
var video = document.getElementById("Video1");
        if(video.volume > 0 ){ video.volume = video.volume - 0.1;}
    };
    document.getElementById("volUp").addEventListener("click"){
        var video = document.getElementById("Video1");
        if(video.volume < 1 ){ video.volume = video.volume + 0.1;}
    };
}

Le test if(video.volume < 1 ) && if(video.volume > 0 ) n'est peut être pas nécessaire à toi de tester

volume est compris entre 0 et 1 si tu ne tests pas la valeur de video.volume j'ai peur que tu puisses mettre des -100 ( si plusieurs cliques ) et donc pour revenir a 0 il te faudra plusieurs cliques sur volUp, le test devrait évité cela. A tester

-
Edité par AliasDmc 11 janvier 2018 à 19:26:38

Découvrez les Css avec la zonecss.fr