He estado buscando por mucho tiempo, pero todavía no ha encontrado una solución válida para mi problema. Yo no puedo parecer para obtener el reproductor de vídeo para entrar en pantalla completa. La API tiene muchos ejemplos, pero ninguno de ellos parece funcionar.

La versión de jQuery incluido en la página actualmente estoy trabajando es 1.8.2. También, estoy utilizando parallax-1.1.js y las bibliotecas necesarias para que funcione correctamente, de modo que también puede ser un problema.

El cliente en el que estoy trabajando para que quiere que el sitio tenga un diseño sensible, con la habilidad del jugador para ir directamente al modo de pantalla completa cuando el botón de «Play» que se hace clic en. Esta funcionalidad debe ser avalable tanto en escritorio y móvil/tablet navegadores. En la página del vídeo, no debe ser de 3 reproductores de vídeo, cada uno de ellos tiene Identificadores únicos, y también tienen un común clase CSS.

Parte del código que he probado no funcionan bien. He aquí un ejemplo JS fragmento de código de control de uno de los video de las etiquetas HTML.

Ejemplo:

player1 = _V_('video-1');

player1.on("play",
    function () {
        this.requestFullScreen();
});

player1.on("ended",
    function () {
        this.cancelFullScreen();
});

El código que se genera este error:

Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'

Estoy trabajando con la versión más reciente de Google Chrome.

  • ¿Sabes que versión de video.js estás usando? Puedes compartir un enlace al código de trabajo?
  • Sí, es la versión 4.0.4. Yo no puedo compartir ninguna información sobre el sitio, ya que se encuentra en desarrollo y de todos … lo siento pero es confidencial.

4 Comentarios

  1. 9

    Hay dos problemas a resolver aquí.

    Primer lugar, usted no puede ir a pantalla completa dentro de un ‘juego’ de controlador de eventos. Para la seguridad y la buena experiencia de usuario, los exploradores sólo vamos a activar la pantalla completa en el interior de un usuario activa evento, como un ‘clic’. Usted no puede tener cada página web que va a pantalla completa tan pronto como usted lo visita, y puede hacer que un vídeo se reproduzca automáticamente, lo cual constituiría una violación de esa regla. Por lo que necesita para mover esto a un ‘clic’ de controlador en el real botón de play.

    El segundo es un gran problema con Video.js 4.0.x, que es que es record el uso de Google Compilador de Cierre con Optimizaciones Avanzadas. Muchas de las propiedades y métodos públicos están ofuscadas, haciendo difícil/imposible de usar. En este caso, requestFullScreen es ahora player1.Pa(). Y, en la medida que puedo decir, cancelFullScreen no existe en absoluto.

    Aquí están algunas opciones de cómo manejar esto:

    1. Utilizar el confuso nombre de método. Yo no recomiendo esto, porque a) el nombre cambia con cada actualización de versión menor (por ejemplo, 4.0.5) y b) se hará de su código ilegible, y c) no se puede utilizar cancelFullScreen.

    2. Conseguir un record de copia video.js y de acogida a ti mismo. (Puede utilizar Uglify u otro minifier que no se metan con los nombres de método.) Video.js no proporcionar este archivo, así que tienes que clonar el repositorio git y ejecutar el script de compilación de sí mismo. Y usted no consigue la ventaja de usar video.js’s CDN gratis.

    3. Utilizar un versión anterior de video.js y esperar hasta el 4.x está listo para el prime time.

    4. No uso video.js en todos los. Considere la posibilidad de jPlayer y jwPlayer o rollo de su propio.

    Recomiendo 2 o 3.

    Actualización: parece Que este tema en particular se ha fijo, pero no se ha hecho en lanzamiento.

    • Muchas gracias. Voy a mirar en esto. Necesidad de probarlo.
    • Hola de nuevo. Sus sugerencias han sido muy útiles. Después de algún tiempo dedicado a «jugar» con alrededor de video.js he decidido cambiar con jPlayer. Perdido mi dolor de cabeza eversince. El mayor problema es, como usted dijo, la ofuscación de sus métodos. Gracias de nuevo por tu ayuda.
  2. 1

    Yo personalmente utiliza un enlace personalizado que provoca tanto jugar y a pantalla completa.

    <a class="enter-fullscreen" href="#">Play fullscreen</a>

    Y el js parte:

    <script type="text/javascript">
    
        $('.enter-fullscreen').click(function(e) {
            e.preventDefault();
            $('.vjs-play-control').click();
            $('.vjs-fullscreen-control').click();
        });
    
    </script>

    Este es mejorables, pero simple y hace el trabajo.

  3. 1

    Una forma fácil para resolver el problema:

    document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)

    Vídeo va a pantalla completa y normal de eventos del botón de reproducción de las causas que empezar a jugar.

    • Haga doble clic en el jugador también trae a pantalla completa. El uso de esta solución no va a desencadenar.
  4. 0

    en video.js archivo de ir a esta líneas

    BigPlayButton.prototype.handleClick = function handleClick(event) {
    
            var playPromise = this.player_.play();

    y agregar

    BigPlayButton.el prototipo.handleClick = función handleClick(evento) {

            var playPromise = this.player_.play();
            document.getElementsByClassName('vjs-fullscreen-control')[0].click()
            //exit early if clicked via the mouse
            if (this.mouseused_ && event.clientX && event.clientY) {
                silencePromise(playPromise);
                return;
            }

Dejar respuesta

Please enter your comment!
Please enter your name here