Ir a pantalla completa con video HTML5 en iPad/iPhone

Estoy tratando de reproducir e ir a pantalla completa para un elemento de video HTML5 en un iPad/iPhone a través de JavaScript, pero cuando intento videoElement.webkitEnterFullScreen(), veo un INVALID_STATE_ERR: Dom excepción 11.Ir a pantalla completa con video HTML5 en iPad/iPhone

Mi Code

para Example

Ahora, parece que el apoyo específico para se añadió this behavior aquí:

que impide específicamente va ful lscreen sin un gesto de usuario.

Mi pregunta:

¿Hay una solución para esto?

veo que el reproductor de vídeo HTML5 de Vimeo imita este comportamiento de alguna manera como se ve here (en iPad/iPhone)

Por lo tanto, parece que es posible. ¿Me estoy perdiendo de algo?

Fuente

2011-03-15 eculver

en el iPhone, el vídeo es siempre lleno pantalla, el navegador simplemente ejecuta quicktime externamente cuando hace clic en el enlace a un video –

Creo que lo que Evan está pidiendo es reproducir el video en el "fullsc modo reen ", que no requiere que el usuario busque el archivo (como lo que sucede cuando hace clic en el control de pantalla completa en el iPad). Así es como Vimeo funciona en el iPhone. –

Testing en IOS simulador de Ipad

esperanza que puedo ayudar a alguien:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script type="text/javascript"> 
    var vid; 

    function init() { 
     vid = document.getElementById("myVideo"); 
     vid.addEventListener("loadedmetadata", goFullscreen, false); 
    } 

    function goFullscreen() { 
     vid.webkitEnterFullscreen(); 
    } 

    $(document).ready(function(){ 
     init(); 

     $("#myVideo").bind('ended', function(){ 
      $('#myVideo')[0].webkitExitFullScreen(); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <h1>Fullscreen Video</h1> 
    <video src="movie.mp4" id="myVideo" autoplay controls > 
    </video> 
</body> 
</html>

Fuente

2012-08-21 06:40:19

Ya sabes, hay mejores formas de publicar el código aquí. http://stackoverflow.com/editing-help –

Más información en Safari's Developer Library (el código anterior fue tomado casi textualmente de aquí): https://developer.apple.com/library/safari/documentation/AudioVideo/ Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html # // apple_ref/doc/uid/TP40009523-CH3-SW13 – notacouch

Esto es antiguo, webkitEnterFullScreen es obsceno y debe usar webkitRequestFullscreen y luego webkitExitFullScreen debe reemplazarse por ocument.webkitCancelFullScreen(). Además, esto no es compatible con Safari iOS, consulte http://caniuse.com/#feat=fullscreen. – carzogliore

he usado esto y que trabajó para mí

- (void) makeHTML5VideoFullscreen { 
    if(webView) { 
     [webView stringByEvaluatingJavaScriptFromString: @"document.querySelector('video').webkitEnterFullscreen();"]; 
    } 
}

Fuente

2015-09-28 10:56:36

Ir a pantalla completa con video HTML5 en iPad/iPhone

Respuesta

Cuestiones relacionadas