Agregué un botón de reproducción a un video de fondo HTML en mi sitio para que los usuarios puedan elegir reproducir el video o no. El video fue agregado con el siguiente código:
<video id="mobilevideo" class="video-full" loop muted playsinline> <source src="<?php echo esc_url( $videofile ); ?>" type="video/mp4">Your browser does not support the video tag. </video>Agregué los botones de control y los diseñé para que los íconos puedan cambiar de reproducción a pausa cuando el usuario alterna el botón. Hice lo mismo para silenciar y activar.
<a class="playcontrol" href="#"> <img src="<?php echo $pause; ?>" width="18" height="" alt="overlay" class="play"> <img src="<?php echo $play; ?>" width="18" height="" alt="overlay" class="pause"> </a> <a class="soundcontrol" href="#"> <img src="<?php echo $pause; ?>" width="18" height="" alt="overlay" class="unmute"> <img src="<?php echo $play; ?>" width="18" height="" alt="overlay" class="mute"> </a>Sin embargo, no quiero que el audio se reproduzca solo. Quiero que los usuarios puedan hacer clic en otro botón para habilitar o no el audio.
var mobileVideo = document.getElementById("mobilevideo"); $(".video-mobile video").prop('muted', true); $(".video-mobile .playcontrol").click(function () { if (mobileVideo.paused) { mobileVideo.muted = true; mobileVideo.play(); $(this).addClass('playsound'); // changing icon for button } else { mobileVideo.pause(); $(this).removeClass('playsound'); // changing icon for button } }); $(".video-mobile .sound-control").click(function () { if ($(".video-mobile video").prop('muted')) { $(".video-mobile video").prop('muted', false); $(this).addClass('playsound'); // changing icon for button } else { $(".video-mobile video").prop('muted', true); $(this).removeClass('playsound'); // changing icon for button } });El problema que tengo es que aunque ambos botones funcionan bien. El botón de reproducción hace que el video no se silencie cuando se hace clic. No quiero eso, pero no estoy seguro de cómo hacer que el botón de reproducción solo controle la reproducción y la pausa sin el audio, mientras que el otro botón controlaría el audio.
Cualquier sugerencia es apreciada.
Eventualmente resolvió esto usando Video Event. Se eliminó la línea - mobileVideo.muted = true; y se agregó a continuación a la secuencia de comandos para silenciar el video una vez que comience a reproducirse:
mobileVideo.addEventListener('play', (event) => { mobileVideo.muted = true; });Todavía juegue unos milisegundos antes de que la función se active, pero funciona en general. Apenas se nota. Sin embargo, la sugerencia para afinar esto es bienvenida.
Puede intentar usar la propiedad de volume y establecerla en 0 . Es un intervalo entre 0-1. En este caso sería: mobileVideo.volume = 0; .