Estoy tratando de forzar a mi reproductor html5 para que entre en pantalla completa tan pronto como se cargue la página, probé con diferentes soluciones que pude encontrar, pero ninguna parece funcionar para mí.
Aquí está el código con el que estoy trabajando.
<!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grazie e arrivederci</title> <link rel="stylesheet" href="../stili.css"> </head> <body onload="requestFullScreen()"> <video width=960 height=540 id="grazieVid" controls autoplay> <source src="grazie.mp4"></source> </video> <script> function requestFullScreen() { var element = document.getElementById("grazieVid"); // Supports most browsers and their versions. var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if (requestMethod) { // Native full screen. requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") { // Older IE. var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> </body> </html>HTML 5 no proporciona ninguna forma de hacer un video a pantalla completa, pero la API de pantalla completa paralela define una API para que los elementos se muestren a pantalla completa.
Esto se puede aplicar a cualquier elemento, incluidos los videos.
El soporte del navegador es bueno, pero Internet Explorer y Safari necesitan versiones prefijadas.
Se proporciona una demostración externa ya que las reglas de espacio aislado de Stack Snippet la rompen.
<div id="one"> One </div> <div id="two"> Two </div> <button>one</button> <button>two</button> addEventListener("click", event => { const btn = event.target; if (btn.tagName.toLowerCase() !== "button") return; const id = btn.textContent; const div = document.getElementById(id); if (div.requestFullscreen) div.requestFullscreen(); else if (div.webkitRequestFullscreen) div.webkitRequestFullscreen(); else if (div.msRequestFullScreen) div.msRequestFullScreen(); });