tamara87
Nov 19, 2015, updated at 16:47:58 (UTC)
view5225
view2
0
Goto Top

Seite ohne Buttonclick im Vollbildmodus ausführen

GermanQuestionHTMLDevelopment
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>
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 288832

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

Printed on: April 26, 2024 at 14:04 o'clock

2 Comments
Latest comment
Goto Top
Mitglied: 122990
122990 Nov 19, 2015 updated at 16:58:03 (UTC)
Goto Top
Moin,
den Vollbildmodus kannst du per JavaScript aus Sicherheitsgründen nur vom User anfordern, dafür gibt es eine API:

Gruß grexit
Member: DirkEinstedt
DirkEinstedt Aug 10, 2016 at 16:09:59 (UTC)
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();
    }
}
GermanQuestionHTMLDevelopment