Mi principal objetivo ahora es tener un enlace aparecen en la parte superior del vídeo cuando el video ha llegado a la final. El uso de los testigos de jehová de los Jugadores de la funcionalidad que me han determinado la forma en que el vínculo se aparecen cuando el vídeo está completa, pero sólo en la vista estándar. Si el usuario ve el video en pantalla completa en el enlace no aparece. He hecho una lectura amplia y entender que cuando se está en modo de pantalla completa el video es en flash y no puedo reemplazar las funciones de flash sin integrar el enlace en el archivo swf, que no quiero hacer.

Lo que he hecho es quitar el botón pantalla completa en el JW Player reproductor de video con la piel. A continuación, he creado un botón para mostrar el video en pantalla completa usando HTML5 función de pantalla completa. (Entiendo que el IE no funciona con este…que está bien por ahora). Yo también soy capaz de crear una pantalla completa de cambio de estado del detector de eventos para que mi enlace aparecerá en la parte superior del vídeo. Pero no funciona.

No importa lo que el estilo del DIV que contiene el enlace no aparece en la parte superior del vídeo.

Puede que alguien me apunte en la dirección correcta?

Gracias por cualquier ayuda que alguien me puede dar.

Ejemplo de código:

#container{
       position:relative;
   z-index:0;
}

#overlay {
   visibility:hidden; 
   width: 700px; 
   height:50px; 
   color:#FFF; 
   position: absolute; 
   top: 532px; 
   margin:8px; 
   padding:5px; 
   background-color:#000;   
   text-align:center;
}

#overlayfullscreen{
   visibility:hidden;
   text-align:center;
   color:#FFF;
   font-size:26px;
   z-index: 1000;
   position: absolute;          
   top: 800px;
   margin:8px; 
   padding:5px; 
   overlay:hidden;          
}



<div id="container">
    Loading the player, if not working please update your browser.
</div>                      

<button onClick="goFullscreen('container'); return false">Click for Fullscreen</button>





var path = '<?php echo $video_path ?>';

jwplayer("container").setup(
{
autostart: <?php echo $autostart ?>,        
file: "<?php echo $full_video_path ?>",                                 
height: <?php echo $height ?>,
width: <?php echo $width ?>,
skin: '<?php echo $skin ?>',

events: {
    onComplete: function(){
         document.getElementById('overlay').style.visibility = 'visible';                                       
      }                                 
    }                                   
});

document.addEventListener("mozfullscreenchange", function () 
{                                   
document.getElementById('overlayfullscreen').style.visibility = 'visible';              
}, false);

OriginalEl autor bryankerk | 2013-04-02

3 Comentarios

  1. 0

    El problema es que el vídeo se muestra absolutely. Usted puede hacer que su enlace tiene position: absolute y que debe hacer.

    He puesto el vídeo se muestra como la Relación y el vínculo DIV a que se muestra como Absoluta y todavía no está mostrando en la parte superior del video…

    OriginalEl autor What have you tried

  2. 14

    Es un truco simple, usted necesita agregar el máximo valor de z-index que es (z-index: 2147483647;) en el elemento de superposición. Que truco va a resolver su problema.

    z-index: 2147483647;

    Aquí es actualizado su violín:
    http://jsfiddle.net/TcpX5/36/

    Wow, esto funciona. Es sólo un truco o es parte de la mota? En otras palabras, es probable que esto se «fija» en el futuro, por lo que no funciona?
    Esto no funciona en móviles.
    no trabajo en el 2018 (probado en Chrome 71.0.3578.80)

    OriginalEl autor Carmijoon

  3. 1

    He creado una pequeña demo, estoy usando un video de HTML5, no un Reproductor de Flash, pero el comportamiento debe ser el mismo: http://jsfiddle.net/sandro_paganotti/TcpX5/

    Para alternar pantalla completa me sugieren el uso de la pantalla llena ( https://github.com/sindresorhus/screenfull.js ), que básicamente se encarga de las pequeñas diferencias entre Firefox y Chrome.

    Aquí está el código, basta con sustituir la <video> elemento con su Reproductor JW aplicación:

    HTML

    <div id="video">
        <video width="100%" src="yourmovie.webm" controls></video><br/>
        <button>go full screen</button>
        <a href="#">Special link</a>
    </div>

    CSS

    #video{ position: relative; }
    a{  position: absolute; top: 10px; right: 10px;
        border: 1px solid red; display: block; background: #FFF } 

    Javascript

    $('button').click(function(){
        screenfull.request();
    });

    Una nota final: jsfiddle desactivar el modo de pantalla completa (fuente: https://webapps.stackexchange.com/questions/26730/can-full-screen-mode-be-activated-in-jsfiddle) para ver el demo, usted tiene que ajustar manualmente jsfiddle iframe usando chrome devtools o firebug como se especifica en el enlace de arriba.

    El enlace para descargar los ficheros JS no está funcionando. Me parece que mi goFullScreen función funciona bastante bien. función goFullscreen(id) { var elemento = document.getElementById(id); if(elemento.mozRequestFullScreen) { elemento.mozRequestFullScreen(); } else if(elemento.webkitRequestFullScreen) { elemento.webkitRequestFullScreen(); } }

    OriginalEl autor Sandro Paganotti

Dejar respuesta

Please enter your comment!
Please enter your name here