tamara87
Goto Top

Seite ohne Buttonclick im Vollbildmodus ausführen

Guten Abend Jungs,
ich habe hier ein Script welches ich gerne im Vollbildmodus starten lassen möchte,
leider geht es bisher nur per Button,
gibt es da eine Möglichkeit direkt beim aufrufen denn Buttonclick durchzuführen.
Natürlich weiß ich das der Browser je nach Hersteller noch mal nachfragen wird ob
der Vollbildmodus tatsächlich ausgeführt werden soll aber das wäre nicht schlimm.

Euch allen noch einen schönen Abend
Tamara

 
<html>

<script src="Data/jquery.js"></script>  
<script src="Data/screenfull.js"></script>  

<section>
<button id="request">Starten</button>  
<button id="exit">Beenden</button>  
</section>

<script>
		$(function () {
			$('#supported').text('Supported/allowed: ' + !!screenfull.enabled);  

			if (!screenfull.enabled) {
				return false;
			}

			$('#request').click(function () {  
				screenfull.request($('#container'));  
				// does not require jQuery, can be used like this too:
				// screenfull.request(document.getElementById('container')); 
			});

			$('#exit').click(function () {  
				screenfull.exit();
			});

			$('#toggle').click(function () {  
				screenfull.toggle($('#container'));  
			});

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

			$('#demo-img').click(function () {  
				screenfull.toggle(this);
			});

			function fullscreenchange() {
				var elem = screenfull.element;

				$('#status').text('Is fullscreen: ' + screenfull.isFullscreen);  

				if (elem) {
					$('#element').text('Element: ' + elem.localName + (elem.id ? '#' + elem.id : ''));  
				}

				if (!screenfull.isFullscreen) {
					$('#external-iframe').remove();  
					document.body.style.overflow = 'auto';  
				}
			}

			document.addEventListener(screenfull.raw.fullscreenchange, fullscreenchange);

			// set the initial values
			fullscreenchange();
		});
</script>

</html>

Content-ID: 288832

Url: https://administrator.de/contentid/288832

Ausgedruckt am: 22.11.2024 um 11:11 Uhr

122990
122990 19.11.2015 aktualisiert um 17:58:03 Uhr
Goto Top
Moin,
den Vollbildmodus kannst du per JavaScript aus Sicherheitsgründen nur vom User anfordern, dafür gibt es eine API:

Gruß grexit
DirkEinstedt
DirkEinstedt 10.08.2016 um 18:09:59 Uhr
Goto Top
Hallo Tamara87,

deine Frage ist leider nicht klar und deutlich formuliert, aber ich versuche Dich einmal auf
den richtigen Weg zu bringen.

1. Ein Skript kann man generell (soweit ich weiß), nicht in einem Vollbildmodus ausführen.
2. Als Info (weißt Du wahrscheinlich bereits): Javascript und damit auch das Framework jQuery werden auf dem Client,
d.h. auf deinem eigenen PC ausgeführt.
3. Der Vollbildmodus wird vom Browser veranlasst, sobald dieser die nötigen paar Code-Snippets dafür entdeckt. Bei fast jedem
Browser wird aus Sicherheitsgründen nachgefragt.
4. Ein Video in HTML5 kann man nicht einfach im Vollbildmodus abspielen, aber:

und hier könnte deine Antwort kommen:

Es gibt eine Spezifikation der W3 über Fullscreen (https://www.w3.org/TR/fullscreen/), welche die "requestFullScreen"-Methode bereitstellt.
Mithilfe dieser Methode können Elemente aller Art im Fullscreen-Modus angezeigt werden.

Hier noch ein paar Seiten, die Dir HTML5 ein wenig näher bringen:

http://www.w3schools.com/html/html5_intro.asp - (Englisch, aber kult)
http://www.tutorialspoint.com/html5/ - (Englisch, aber gar nicht mal schlecht)
https://www.coding-lab.de/tutorials/html/ - (Auf Deutsch und mit Videos)
https://www.coding-lab.de/tutorials/html5/ - (Auf Deutsch und mit Videos)
https://developer.mozilla.org/de/docs/Web/HTML/HTML5 - (Ähnelt leider eher einer Dokumentation, aber dafür von A bis Z)

Damit Du nicht traurig bist, hier nocheinmal ein Javascript-Beispiel für "requestFullScreen()":

function Fullscreen( ElementId )
  {
  var El = document.getElementById( ElementId );

  if( El.requestFullScreen )
    {  
    El.requestFullScreen();
    }
  else if( El.mozRequestFullScreen )
    {
    El.mozRequestFullScreen();
    } 
  else if ( El.webkitRequestFullScreen )
    {
    El.webkitRequestFullScreen();
    }
}