Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Loading and Unloading a WebGL player on a website

Discussion in 'Web' started by col000r, Mar 24, 2017.

  1. col000r

    col000r

    Joined:
    Mar 27, 2008
    Posts:
    698
    I had a really nice jQuery solution for the old webplayer, where you'd click on a play button to load the webplayer and have an unload link to unload it and now I'm finally looking into updating everything to use WebGL.

    Is there something out there that does this already? Preferably using jQuery?
     
  2. col000r

    col000r

    Joined:
    Mar 27, 2008
    Posts:
    698
    Okay, wrote my own solution. Basically I'm just loading/unloading an iFrame with jQuery.
     
  3. col000r

    col000r

    Joined:
    Mar 27, 2008
    Posts:
    698
    This is the barebones solution if anyone needs it:
    Code (JavaScript):
    1. <?php
    2.   $row['demo_width'] = 800;
    3.   $row['demo_height'] = 600;
    4.   $row['demo_link'] = "circles.html";
    5. ?>
    6. <!doctype html>
    7. <html lang="en-us">
    8.   <head>
    9.     <meta charset="utf-8">
    10.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    11.     <title>Unity WebGL Player | circles</title>
    12.     <script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.js"></script>
    13.     <script type='text/javascript'>//<![CDATA[
    14.  
    15.         function iFrameLoaded(id, src, width, height) {
    16.             var deferred = $.Deferred(),
    17.                 iframe = $("<iframe scrolling=\"no\" seamless=\"seamless\"></iframe>").attr({
    18.                     "id": id,
    19.                     "src": src,
    20.                     "width": width,
    21.                     "height": height
    22.                 });
    23.  
    24.             iframe.load(deferred.resolve);
    25.             iframe.appendTo("#unityPlayer");
    26.  
    27.             deferred.done(function() {
    28.                 console.log("iframe loaded: " + id);
    29.                 var iframe = document.getElementById("frame");
    30.                 var iframe_canvas = iframe.contentDocument || iframe.contentWindow.document;
    31.                 var canvas = iframe_canvas.getElementById("canvas");
    32.                 canvas.width = width;
    33.                 canvas.height = height;
    34.                 //alert("loaded " + canvas);
    35.             });
    36.  
    37.             return deferred.promise();
    38.         }
    39.  
    40.           function showDemo(options) {
    41.           var settings = $.extend( {
    42.                             width : 600,
    43.                             height : 450,
    44.                             file : "index.html",
    45.                             params: {
    46.                                 backgroundcolor : "222222",
    47.                                 bordercolor: "222222",
    48.                                 textcolor: "FFFFFF",
    49.                                 logoimage: "GameAssetsLogo.png",
    50.                                 disableContextMenu: false
    51.                             }
    52.                         }, options);
    53.             $("#unityPlayer").empty();
    54.             $("#hideWebPlayer").show();
    55.             $.when(iFrameLoaded( "frame", settings.file, settings.width, settings.height) ).then(function() {
    56.                 // console.log("All done loading iframe");
    57.             });
    58.  
    59.           }
    60.  
    61.           function hideDemo() {
    62.             $("#unityPlayer").html("<div class=\"notmissing\"><a href='javascript:showDemo({ width : <?php echo $row['demo_width']; ?>, height : <?php echo $row['demo_height']; ?>, file : \"demos/<?php echo $row['demo_link']; ?>\" });'>Show Demo</a></div>");
    63.             startUp();
    64.             $("#hideWebPlayer").css({'width': '<?php echo $row['demo_width']; ?>'});
    65.           }
    66.  
    67.           function startUp() {
    68.             $("#hideWebPlayer").hide();
    69.           }
    70.      
    71.         $(document).ready(function(){ startUp(); });
    72.  
    73.         //]]>
    74. </script>
    75.   </head>
    76.   <body class="template">
    77.  
    78.     <div id="unityPlayer">
    79.       <div class="notmissing"><a href='javascript:showDemo({ width : <?php echo $row['demo_width']; ?>, height : <?php echo $row['demo_height']; ?>, file : "demos/<?php echo $row['demo_link']; ?>" });'>Show Demo</a></div>
    80.     </div>
    81.  
    82.     <div id="hideWebPlayer"><a href="javascript:hideDemo();">Unload WebGL Player</a></div>
    83.  
    84.  
    85.   </body>
    86. </html>
    87.  
    Just make sure the WebGL HTML has no margin/padding, etc. and you should be good to go!