Réglage du volume élément <audio>-50% lors de <video> joue

Question

Salut tout le monde j'espère que vous pouvez répondre à cette :)

Fondamentalement, j'ai quelques html 5 vidéos dans index.html avec la lecture automatique de fond audio. Ce que je veux arriver est réduit l'arrière-plan audio à 50% lorsque la balise vidéo est en cours de lecture. Serait bien si je pouvais utiliser une classe pour cibler tous les éléments vidéo si possible :) si l'utilisateur quitte la vidéo, il ramène le volume à 100%

Im actuellement en utilisant jQuery pour mon projet, donc une solution dans jQuery serait génial!

Actuellement, je pense que ce serait le long des lignes de cette ....

// to reduce volume to 50%. im not sure what the code would be to reduce volume ? maybe 0.5 or something ? 

    $("video").click(function(){ 
     $(audio).mute(); 
    }); 

// turn volume back to 100% once exit button is clicked 

    $(".exit").click(function(){ 

    }); 

Answer 1

Je pense que audio.volume = 0.5 devrait fournir le résultat souhaité (réduire le volume à 50%) et audio.volume = 1.0 pour régler le volume de retour à 100 % Voir MDN Docs pour plus de détails.

Voir extrait ci-dessous (cliquez sur les boutons et regardez les commandes de volume bar):

var $audio = $('#audio-test').get(0); 
 

 
$('#set-volume-50').click(function(){ 
 
    $audio.volume = 0.5; 
 
}); 
 

 
$('#set-volume-100').click(function(){ 
 
    $audio.volume = 1.0; 
 
});

button { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<audio id="audio-test" controls="controls"> 
 
    Your browser does not support the <code>audio</code> element. 
 
    <source src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" type="audio/ogg"> 
 
</audio> 
 
    <button id="set-volume-50">Set volume to 50%</button> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
    <button id="set-volume-100">Set volume to 100%</button>