Rotate to landscape to enter Fullscreen
Lock to fullscreen on rotate
Always lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)

Installation

npm install video.js
npm install videojs-mobile-ui

Version 1.x requires video.js 8.x as a peer dependency. Lowever video.js versions are not supported. 0.7.0 supports video.js 7.x. To install the latest version that works with Video.js 7, use the latest7 tag:

npm install videojs-mobile-ui@latest7

Plugin Options

Default options

{
  fullscreen: {
    enterOnRotate: true,
    exitOnRotate: true,
    lockOnRotate: true,
    lockToLandscapeOnEnter: false,
    disabled: false
  },
  touchControls: {
    seekSeconds: 10,
    tapTimeout: 300,
    disableOnEnd: false,
    disabled: false,
  }
};

Options

fullscreen.enterOnRotate boolean Whether to go fullscreen when rotating to landscape
fullscreen.exitOnRotate boolean Whether to leave fullscreen when rotating to portrait (if not locked)
fullscreen.lockOnRotate boolean Whether to lock to fullscreen when rotating to landscape
fullscreen.lockToLandscapeOnEnter boolean Whether to lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)
fullscreen.disabled boolean If true no fullscreen handling except the deprecated iOS fullwindow hack
touchControls.seekSeconds int Seconds to seek when double-tapping
touchControls.tapTimeout int Milliseconds to consider a double-tap
touchControls.disableOnEnd boolean Whether to disable touch controls when the video has ended, e.g. if an endscreen is used. Automatically disables if the endscreen plugin is present when this plugin initialises
touchControls.disabled boolean If true no touch controls are added.

Usage

To include videojs-mobile-ui on your website or web application, use any of the following methods.

`<script>` Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<link rel="stylesheet" href="//path/to/videojs-mobile-ui.css">  
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-mobile-ui.min.js"></script>
<script>
  var player = videojs('my-video');

  player.mobileUi();
</script>

The release versions will be available on jdselivr, unpkg etc.

Browserify/CommonJS

When using with Browserify, install videojs-mobile-ui via npm and require the plugin as you would any other module.

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-mobile-ui');

var player = videojs('my-video');

player.mobileUi();

Also include the CSS.

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(['video.js', 'videojs-mobile-ui'], function(videojs) {
  var player = videojs('my-video');

  player.mobileUi();
});

Also include the CSS.

Import

To import into React etc import both the package and the script

import videojs from 'video.js'
import 'videojs-mobile-ui/dist/videojs-mobile-ui.css';
import 'videojs-mobile-ui';

License

MIT. Copyright (c) mister-ben <git@misterben.me>

Keywords

FAQs

What is videojs-mobile-ui?

Is videojs-mobile-ui popular?

Is videojs-mobile-ui well maintained?

Package last updated on 22 Sep 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

videojs-mobile-ui