javascript change Alternar la propiedad de visibilidad de div




innerhtml (3)

Usando jQuery:

$('#play-pause').click(function(){
  if ( $('#video-over').css('visibility') == 'hidden' )
    $('#video-over').css('visibility','visible');
  else
    $('#video-over').css('visibility','hidden');
});

Tengo un video HTML 5 en un div. Luego tengo un botón de reproducción personalizado, que funciona bien.
Y tengo la visibilidad del video configurada como oculta en la carga y visible cuando se hace clic en el botón Reproducir, ¿cómo lo devuelvo a oculto cuando se hace clic en el botón reproducir nuevamente?

function showVid() {
  document.getElementById('video-over').style.visibility = 'visible';
}
#video-over {
  visibility: hidden;
  background-color: rgba(0, 0, 0, .7)
}
<div id="video-over">
  <video class="home-banner" id="video" controls="">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    </video>
</div>

<button type="button" id="play-pause" onclick="showVid();">
      <img class="img-home-apply" src="/wp-content/images/apply-pic.png" alt="Apply Now">
      </button>

Básicamente estoy tratando de alternar entre los dos estados de visible y oculto, excepto que no puedo usar el botón de alternar porque ese programa oculta el div. Lo necesito allí, solo oculto, por lo que mantiene la altura correcta.


Answer #1

Hay otra forma de hacerlo con solo JavaScript. Todo lo que tiene que hacer es alternar la visibilidad en función del estado actual de visibilidad del DIV en CSS.

Ejemplo:

function toggleVideo() {
     var e = document.getElementById('video-over');

     if(e.style.visibility == 'visible') {
          e.style.visibility = 'hidden';
     } else if(e.style.visibility == 'hidden') {
          e.style.visibility = 'visible';
     }
}

Answer #2

Sé que esta es una vieja pregunta, pero me encontré investigando un problema diferente.

De acuerdo con los documentos de jquery, llamar a toggle () sin parámetros alternará la visibilidad.

    $('#play-pause').click(function(){
        $('#video-over').toggle();
    });

http://jsfiddle.net/Q47ya/





show-hide