[JS] gebruik FullScreen API - Softwareontwikkeling

maandag 12 augustus 2013 14:18

Acties:

Topicstarter

Ik krijg het niet voor elkaar om een fullscreen call te maken met de HTML5 Fullscreen API.

Google vertelt me dat iedere browser vendor hier zijn eigen prefix call voor gebruikt. Mozilla heeft mozRequestFullScreen, WebKit heeft webkitRequestFullScreen, etc.

Nu heb ik de volgende JSFiddle gemaakt, en ook een los .html testbestand, maar hoewel ik in Chrome gewoon in het juiste if-statement beland geeft de browser het HTML element niet fullscreen weer.

JSFiddle

Compleet testdocument:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Fullscreen test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        console.log("document ready");
        try {
            if (document.documentElement.requestFullscreen)
            {
                console.log("requestFullScreen");
                document.documentElement.requestFullscreen();
            }

            else if (document.documentElement.mozRequestFullScreen)
            {
                document.documentElement.mozRequestFullScreen();
                console.log("mozRequestFullScreen");
            }
            
            else if (document.documentElement.webkitRequestFullscreen)
            {
                document.documentElement.webkitRequestFullscreen();
                console.log("webkitRequestFullscreen");
            }
            else
                console.log("Full screen not supported");
        }
        catch(e) {
            console.log(e);
        }       
    })
    </script>
</head>
<body>
<h1>Full Screen API test</h1>
</body>
</html>

Doe ik iets verkeerd?

maandag 12 augustus 2013 14:39

Acties:

Acid_Burn

uhuh

Ik krijg een foutmelding:

Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler.

Als ik voorbeelden nakijk zie ik ook dat ze de fullscreen aanroep in een eventlistener doen. Zie http://robnyman.github.io/fullscreen/

ps: de url van de include van jquery klopt niet.

[ Voor 7% gewijzigd door Acid_Burn op 12-08-2013 14:39 ]

Glass Eye Photography | Zelfbouw wireless fightstick | Mijn puzzel site

maandag 12 augustus 2013 15:27

Acties:

InZane

Acid_Burn schreef op maandag 12 augustus 2013 @ 14:39:
ps: de url van de include van jquery klopt niet.

Wat klopt daar niet aan dan? Doet het prima hier.

maandag 12 augustus 2013 16:01

Acties:

Struikrover

Topicstarter

Acid_Burn schreef op maandag 12 augustus 2013 @ 14:39:
Ik krijg een foutmelding:

[...]

Als ik voorbeelden nakijk zie ik ook dat ze de fullscreen aanroep in een eventlistener doen. Zie http://robnyman.github.io/fullscreen/

ps: de url van de include van jquery klopt niet.

Daar zit wat in, er kan bewust gekozen zijn om geen fullscreen te triggeren bij document ready, tegen misbruik voor reclames e.d. .

Echter wil het nog steeds niet als ik het met een button trigger:

http://jsfiddle.net/R4j6X/3/

maandag 12 augustus 2013 16:10

Acties:

Acid_Burn

uhuh

InZane schreef op maandag 12 augustus 2013 @ 15:27:
[...]

Wat klopt daar niet aan dan? Doet het prima hier.

Er staat geen http: voor... dus dan laad firefox em ook niet.(niet in zijn jsfiddle, maar in het codevoorbeeld in de TS)

Op JS fiddle zeurt ie over dat er een iframe het attribuut allowfullscreen moet hebben... combineer ik de code gewoon in een html file dan doe ie het wel

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Fullscreen test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $("#gofullscreen").click(function() {
        try {
            if (document.documentElement.requestFullscreen)
            {
                console.log("requestFullScreen");
                document.documentElement.requestFullscreen();
            }

            else if (document.documentElement.mozRequestFullScreen)
            {
                document.documentElement.mozRequestFullScreen();
                console.log("mozRequestFullScreen");
            }
            
            else if (document.documentElement.webkitRequestFullscreen)
            {
                document.documentElement.webkitRequestFullscreen();
                console.log("webkitRequestFullscreen");
            }
            else
                console.log("Full screen not supported");
        }
        catch(e) {
            console.log(e);
        }
    });
});
    </script>
</head>
<body>
    <h1>Full Screen API test</h1>
    <button id="gofullscreen">Klik</button>
</body>
</html>

[ Voor 68% gewijzigd door Acid_Burn op 12-08-2013 16:17 ]

Glass Eye Photography | Zelfbouw wireless fightstick | Mijn puzzel site

maandag 12 augustus 2013 16:27

Acties:

Spinal

Acid_Burn schreef op maandag 12 augustus 2013 @ 16:10:
[...]

Er staat geen http: voor... dus dan laad firefox em ook niet.(niet in zijn jsfiddle, maar in het codevoorbeeld in de TS)

Een URL die begint met // laadt van HTTP of HTTPS, afhankelijk van de omgeving (dus als je op HTTP zit laadt ie van HTTP, als je op HTTPS zit laadt ie van HTTPS). Lokaal kan het inderdaad dat het niet werkt, maar de URL klopt dus wel gewoon

Full-stack webdeveloper in Groningen

maandag 12 augustus 2013 16:28

Acties:

Struikrover

Topicstarter

Fixed, heb er maar even http:// van gemaakt. Inderdaad werkt dit lokaal niet.

@Acid_Burn hierboven: Dat is 'm inderdaad. JSFiddle werkt niet mee, gewoon in een kale .html werkt het prima. Thanks