Video doesn't enter fullscreen

mian.tram
Posts: 2
Joined: Wed Dec 21, 2016 11:13 am

Video doesn't enter fullscreen

Postby mian.tram » Wed Dec 21, 2016 12:47 pm

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>

User avatar
bbaudel
ForgeJS Team
Posts: 35
Joined: Wed Oct 26, 2016 9:20 am

Re: Video doesn't enter fullscreen

Postby bbaudel » Thu Dec 22, 2016 9:24 am

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

mian.tram
Posts: 2
Joined: Wed Dec 21, 2016 11:13 am

Re: Video doesn't enter fullscreen

Postby mian.tram » Thu Dec 22, 2016 4:10 pm

Thank you Benjamin.
As you said, handling the fullscreen at the container level works as expected.

Mian

Who is online

Users browsing this forum: No registered users and 2 guests