Fullscreen request denied

[rtritto]

I'm using video.js with Next.js. Running in development mode and using Firefox from mobile, I get TypeError: Fullscreen request denied error.

Steps to reproduce

1. Click Play
2. Enter fullscreen with fullscreen button of the player
3. (optional) Pause video
4. Exit fullscreen with back button of Android

or

1. Click Play
2. Enter fullscreen with rotation of -90° or 90°
3. Exit fullscreen with back button of Android
4. Rotate to 0°
5. Enter fullscreen with rotation of -90° or 90°

or

1. Click Play
2. Enter fullscreen with rotation of -90° or 90°
3. Exit fullscreen with fullscreen button of the player
4. Enter fullscreen with rotation of -90° or 90°

Results

Actual

Next.js Error (Firefox Stable/Nightly)

```js TypeError: Fullscreen request denied (24774:0) @ requestFullscreenHelper_ 24772 | 24773 | if (this.fsApi_.requestFullscreen) { > 24774 | var promise = this.el_[this.fsApi_.requestFullscreen](fsOptions); 24775 | 24776 | if (promise) { 24777 | promise.then(function () { ```

Console (Firefox Developer)

``` Warning: Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler. video.es.js:24774 Error: Uncaught (in promise) TypeError: Fullscreen request denied video.es.js:24774 requestFullscreenHelper_ video.es.js:24774 requestFullscreen video.es.js:24740 requestFullscreen video.es.js:24722 rotationHandler videojs-mobile-ui.es.js:312 onPlayerReady videojs-mobile-ui.es.js:334 mobileUi videojs-mobile-ui.es.js:383 timeoutId video.es.js:5140 setTimeout handler*setTimeout video.es.js:5135 ready video.es.js:4454 mobileUi videojs-mobile-ui.es.js:382 basicPluginWrapper video.es.js:27275 videojsMobileReadyCallback videojsMobileReadyCallback.js:13 current PlayerMobile.jsx:55 triggerReady video.es.js:4474 triggerReady video.es.js:4473 timeoutId video.es.js:5140 setTimeout handler*setTimeout video.es.js:5135 triggerReady video.es.js:4467 handleTechReady_ video.es.js:23181 ready video.es.js:4451 loadTech_ video.es.js:22978 src_ video.es.js:25407 handleSrc_ video.es.js:25312 setSourceHelper video.es.js:10196 setSourceHelper video.es.js:10198 setSource video.es.js:9936 timeoutId video.es.js:5140 setTimeout handler*setTimeout video.es.js:5135 setSource video.es.js:9935 handleSrc_ video.es.js:25302 src video.es.js:25378 MediaLoader video.es.js:10420 addChild video.es.js:4226 handleAdd video.es.js:4358 initChildren video.es.js:4407 Player video.es.js:22302 videojs video.es.js:27911 PlayerMobile PlayerMobile.jsx:34 React 5 invokePassiveEffectCreate callCallback invokeGuardedCallbackDev invokeGuardedCallback flushPassiveEffectsImpl Error: Uncaught (in promise) DOMException: The operation is insecure. videojs-mobile-ui.es.js:339 onPlayerReady videojs-mobile-ui.es.js:339 self-hosted:1175 dispatcher video.es.js:2310 trigger video.es.js:2446 trigger$1 video.es.js:3387 handleTechEnded_ video.es.js:23774 loadTech_ video.es.js:23010 self-hosted:1175 self-hosted:1175 dispatcher video.es.js:2310 (Asinc.: EventListener.handleEvent) on video.es.js:2330 listen video.es.js:3120 on video.es.js:3170 listen video.es.js:3122 on video.es.js:3170 loadTech_ video.es.js:23009 src_ video.es.js:25407 handleSrc_ video.es.js:25312 setSourceHelper video.es.js:10196 setSourceHelper video.es.js:10198 setSource video.es.js:9936 self-hosted:1175 timeoutId video.es.js:5140 (Asinc.: setTimeout handler) setTimeout video.es.js:5135 setSource video.es.js:9935 handleSrc_ video.es.js:25302 src video.es.js:25378 MediaLoader video.es.js:10420 addChild video.es.js:4226 handleAdd video.es.js:4358 forEach self-hosted:205 initChildren video.es.js:4407 Player video.es.js:22302 videojs video.es.js:27911 PlayerMobile PlayerMobile.jsx:34 React 5 invokePassiveEffectCreate callCallback invokeGuardedCallbackDev invokeGuardedCallback flushPassiveEffectsImpl ```

Expected

No error.

Versions:

OS: Android 11 Browser: Firefox Stable 91.1.0 or Firefox Nightly 92.0a1 videojs-mobile-ui: 0.5.3 or latest (commit: c85ac35) video.js: 7.15.0 next: 11.1.0

[mister-ben]

Are you only seeing that in conjunction with next.js? Without I'm not seeing that on Firefox Nightly or Stable. It is throwing a DOMException: The operation is insecure on orientation lock, but locking anyway.

[rtritto]

@mister-ben thanks for answer. I added the console output from Firefox Developer to original post.

Error persists also without next.js.

Steps to reproduce

1. yarn init -y
2. yarn set version berry
3. yarn add react react-dom react-scripts video.js videojs-mobile-ui
   4. Create file src/index.js

import { useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-mobile-ui/dist/videojs-mobile-ui.css'
import 'videojs-mobile-ui'

const Player = ({ src }) => {
  const player = useRef(null)
  const videoNode = useRef(null)

  useEffect(() => {
    player.current = videojs(
      videoNode.current,
      {
        controls: true,
        fluid: true,
        preload: 'auto',
        responsive: true,
        sources: [
          {
            src,
            type: 'video/mp4'
          }
        ]
      },
      () => {
        player.current.mobileUi()
      }
    )

    return () => {
      player.current.dispose()  // destroy player on unmount
    }
  }, [])

  return (
    <div data-vjs-player>
      <video
        ref={videoNode}
        className="video-js vjs-big-play-centered"
      />
    </div>
  )
}

const src = 'source_mp4'  // replace with .mp4

ReactDOM.render(
  <Player src={src} />,
  document.getElementById('root')
)

5. Create file public/index.html

```html

```

6. yarn react-scripts start
7. Y
8. Click Play
9. Enter fullscreen with rotation of -90° or 90°
10. Rotate to 0°
11. Enter fullscreen with rotation of -90° or 90°

Result (Firefox Error)

Unhandled Rejection (TypeError): Fullscreen request denied

[mister-ben]

The problem is the second rotate to landscape is not considered a user action.