1

Tengo el siguiente código.

<video id="video" preload="auto">
    <source src="<?php echo get_template_directory_uri() ?>/media/test.mp4" type="">
</video>

Y el siguiente código jQuery dentro de su correspondiente $(document).on('click', '#video', function (e).:

var video = $(this).get(0);

if (video.paused === false) {

    video.pause();

} else {

    video.play();

}

return false;

Lo que necesito y no logro es que cuando el ratón esté fuera del vídeo, este se mantenga con opacidad 0.2. Cuando se haga click en él, adquiera opacidad 1 y mientras se esté reproduciendo se quede con esta opacidad. Y el el caso de que se ponga en stop entonces vuelva a opacidad 0.2.

2
  • ¿Podrías crear un ejemplo mínimo verificable para que veamos el problema? Si necesitas un video de prueba puedes usar éste o éste-
    – Alvaro Montoro
    el 13 dic. 2017 a las 15:07
  • 1
    Como complemento a lo que señala @AlvaroMontoro, videos de prueba en los distintos formatos disponibles para video en HTML5, los puedes encontrar aquí. el 13 dic. 2017 a las 15:26

2 respuestas 2

3

Para manipular la opacidad de los elementos del DOM puedes usar css y agregarle una clase al video cuando este en pause y quitársela cuando este en play seria algo asi

Para gregar la clase te puse 2 ejemplos con jquery y con javascript puedes elegir cualquiera de los dos y hacen la misma funcionalidad.

Lo bueno de agregar y quitar una clase es que puedes agregarle todos los estilos que necesites y es fácil de depurar y mantener aparte de que si tienes varios vídeos y usan la misma funcionalidad a todos se les agregarían los estilos y cambios.

css

.enPausa {
  opacity:0.2;
}

js

var video = $(this).get(0);

if (video.paused === false) {

video.pause();
$(this).addClass("enPausa")//jquery
video.classList.add("enPausa")//javascript vanilla

} else {

video.play();
$(this).removeClass("enPausa")//jquery
video.classList.remove("enPausa")//javascript vanilla
}

return false;

$(document).on('click', '#video', function (e){
    var video = $(this).get(0);

    if (video.paused === false) {
        //$(this).addClass("enPausa")//jquery
        video.classList.add("enPausa")//javascript vanilla
        video.pause();
    } else {
        //$(this).removeClass("enPausa")//jquery
        video.classList.remove("enPausa")//javascript vanilla
        video.play();
    }

    return false;
});
.enPausa {
  opacity:0.2;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" autoplay>
        <source src="//clips.vorwaerts-gmbh.de/VfE_html5.mp4" type=video/mp4>
    </video>

Espero te ayude saludos.

1

necesitas primero que todo tener la opacidad por defecto (0.2) en tu CSS y luego por medio de JavaScript usando la condición que ya tienes podemos manipular dicha opacidad:

$(document).on('click', '#video', function (e){
    var video = $(this).get(0);

    if (video.paused === false) {
        video.style.opacity = 0.2;
        video.pause();
    } else {
        video.style.opacity = 1;
        video.play();
    }

    return false;
});
#video{
    opacity: 0.2;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<video id="video" preload="auto">
    <source src="https://dfcb.github.io/BigVideo.js/vids/frontier.mp4" type="video/mp4">
</video>

O usando jQuery:

$(document).on('click', '#video', function (e){
    var video = $(this).get(0);

    if (video.paused === false) {
        $(this).css('opacity', 0.2);
        video.pause();
    } else {
        $(this).css('opacity', 1);
        video.play();
    }

    return false;
});
#video{
    opacity: 0.2;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<video id="video" preload="auto">
    <source src="https://dfcb.github.io/BigVideo.js/vids/frontier.mp4" type="video/mp4">
</video>

1
  • Me ha servido muuuuuuuy bien, ahora se me presento un problema en el que no pense ayer. Sobre el video tengo un texto y me gustaria que este texto desapareciar al hacer play y volviera a aparecer al hacer pause.No quiero ser pesado ni molesto, de verdad. Pero de momento estoy aprendiendo de forma autodidacta y me cuestan muchas cosas.
    – Dario B.
    el 14 dic. 2017 a las 9:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.