Page 1 of 1

Video doesn't enter fullscreen

Posted: Wed Dec 21, 2016 12:47 pm
by mian.tram
Hello,

I'm trying to set a video into fullscreen by calling the videoHTML5.fullscreenEnter() method from a click event listener but it doesn't work.
On Chrome I have no error message in the console, but Firefox display this warning : "Request for fullscreen was denied because requesting element is no longer in its document".

What is the right way to do it?

Thanks.
Mian

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>KEN - Video</title>
  6.         <!-- Little styling -->
  7.         <style type="text/css">
  8.             html, body, div#container
  9.             {
  10.                 width: 100%;
  11.                 height: 100%;
  12.                 margin: 0;
  13.                 padding: 0;
  14.             }
  15.  
  16.             div#fullscreen
  17.             {
  18.                 position: absolute;
  19.                 bottom: 10px;
  20.                 left: 50%;
  21.                 display : inline-block;
  22.                 background: rgba(0, 0, 0, 0.75);
  23.                 color: whitesmoke;
  24.                 padding: 10px;
  25.                 cursor: pointer;
  26.             }
  27.         </style>
  28.     </head>
  29.  
  30.     <body>
  31.         <div id="container"></div>
  32.         <div id="fullscreen">Fullscreen</div>
  33.  
  34.         <!-- Include the KEN library -->
  35.         <script src="http://kenprivatebeta.kolor.com/releases/0.1.0/build/ken.min.js"></script>
  36.  
  37.         <!-- Start KEN -->
  38.         <script type="text/javascript">
  39.  
  40.             var video = null;
  41.  
  42.             var fullscreenState = false;
  43.             document.getElementById("fullscreen").addEventListener("click", function () {
  44.                 if (video !== null) {
  45.                     console.log("trying to set fullscreen to "+!fullscreenState);
  46.                     if (fullscreenState)
  47.                         video.fullscreenExit();
  48.                     else
  49.                         video.fullscreenEnter();
  50.                 }
  51.             });
  52.  
  53.             // Create a viewer
  54.             var viewer = new KEN.Viewer("container", "config.json");
  55.             viewer.onReady.addOnce(function () {
  56.                 console.log("onReadyViewer");
  57.                 viewer.tour.onSceneLoadComplete.addOnce(setupVideo);
  58.             });
  59.             
  60.             
  61.             function setupVideo()
  62.             {
  63.                 // Try to get the video through the renderer
  64.                 if (viewer.renderer.media !== null)
  65.                 {
  66.                     //Get the video reference
  67.                     video = viewer.renderer.media.displayObject;
  68.  
  69.                     video.onFullscreenEnter.add(function (event)
  70.                     {
  71.                         console.log("onFullscreenEnter");
  72.                         fullscreenState = true;
  73.                     });
  74.                     video.onFullscreenExit.add(function (event)
  75.                     {
  76.                         console.log("onFullscreenExit");
  77.                         fullscreenState = false;
  78.                     });
  79.                 }
  80.                 // If the media is not available, subscibe to the onMediaReady event!
  81.                 else
  82.                 {
  83.                     if (viewer.renderer.onMediaReady.has(setupVideo) === false)
  84.                     {
  85.                         viewer.renderer.onMediaReady.addOnce(setupVideo);
  86.                     }
  87.                 }
  88.             }
  89.  
  90.         </script>
  91.     </body>
  92. </html>

Re: Video doesn't enter fullscreen

Posted: Thu Dec 22, 2016 9:24 am
by bbaudel
Hi Mian,

Try to set the container as fullscreen rather than the media itself.

You can access the main canvas container with viewer.container accessor.

Try this kind of code into your script :
  1. viewer.container.onFullscreenEnter.add(function(event){...});
  2. viewer.container.onFullscreenExit.add(function(event){...});


You can also only set the viewer boolean : viewer.fullscreen to enter (true) and exit (false) fullscreen.

Hope this will help you,

Benjamin

Re: Video doesn't enter fullscreen

Posted: Thu Dec 22, 2016 4:10 pm
by mian.tram
Thank you Benjamin.
As you said, handling the fullscreen at the container level works as expected.

Mian