Full-screen mode control when changing the mobile device orientation

1. Support window mode
2. Pause control
3. Auto enter/exit fullscreen

Example

1/* Default values */
2player.rotateFullScreen({
3  onlyInView: true, // - Rotate only when the video fits in the viewport
4  enterOnRotate: true, // - Enter fullscreen mode on rotate.
5  exitOnRotate: true, // - Exit fullscreen mode on rotate.
6  alwaysInLandscapeMode: true, // - Always in landscape mode.
7  rotateWithPause: false, // - Enter fullscreen even when paused.
8  windowMode: false, // - Use window mode instead of fullscreen. (option for Safari with custom ui)
9  disabled: false, // - Manual disable rotation
10})

React Example

1import { useEffect, useRef } from 'react'
2import videojs from 'video.js'
3import 'video.js/dist/video-js.css'
4import 'videojs-rotate-fullscreen'
5
6export const Video = (props) => {
7  const videoRef = useRef(null)
8  const playerRef = useRef(null)
9
10  const { fill, playsinline, playbackRates, src, type } = props
11
12  const videoJsOptions = {
13    fill: fill,
14    responsive: false,
15    fluid: false,
16    playbackRates: playbackRates,
17    sources: [
18      {
19        src: src,
20        type: type ?? 'video/mp4',
21      },
22    ],
23  }
24
25  useEffect(() => {
26    if (!playerRef.current) {
27      const videoElement = document.createElement('video-js')
28      videoRef.current.appendChild(videoElement)
29      const player = (playerRef.current = videojs(videoElement, videoJsOptions))
30
31      player.rotateFullScreen({
32        enterOnRotate: true,
33        exitOnRotate: true,
34        alwaysInLandscapeMode: false,
35        rotateWithPause: true,
36        windowMode: false,
37        onlyInView: true,
38      })
39    } else {
40      const player = playerRef.current
41      player.src(videoJsOptions.sources)
42    }
43
44    return () => {
45      const player = playerRef.current
46      if (player && !player.isDisposed()) {
47        player.dispose()
48        playerRef.current = null
49      }
50    }
51  }, [videoJsOptions])
52
53  return (
54    <div
55      data-vjs-player
56      ref={videoRef}
57      style={{
58        width: '100%',
59        height: '100%',
60      }}
61    />
62  )
63}