videojs-mobile-ui

Mobile UI for Video.js.

Touch controls:

• Double-tap the left side of the player to rewind ten seconds
• Double-tap the right side of the player to fast-forward ten seconds
• Single-tap the screen to show a play/pause toggle

Fullscreen control:

• 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)

Table of Contents

Installation

• Installation
• Plugin Options
  • Default options
  • Options
• Usage
  • <script> Tag
  • Browserify/CommonJS
  • RequireJS/AMD
• License

Installation

npm install --save videojs-mobile-ui

Plugin Options

Default options

{
  fullscreen: {
    enterOnRotate: true,
    exitOnRotate: true,
    lockOnRotate: true,
    lockToLandscapeOnEnter: false,
    iOS: 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.iOS boolean Whether to use fake fullscreen on iOS (needed for controls to work)
• 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.disableOnEnd 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.

• https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.min.js
• https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.css

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 <[email protected]>