Skip to content

Latest commit

 

History

History
153 lines (109 loc) · 4.45 KB

README.md

File metadata and controls

153 lines (109 loc) · 4.45 KB
Raw

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

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