Video.js Mobile UI

CONTRIBUTING.md

@@ -0,0 +1,30 @@
+# CONTRIBUTING
+
+We welcome contributions from everyone!
+
+## Getting Started
+
+Make sure you have Node.js 4.8 or higher and npm installed.
+
+1. Fork this repository and clone your fork
+1. Install dependencies: `npm install`
+1. Run a development server: `npm start`
+
+### Making Changes
+
+Refer to the [video.js plugin conventions][conventions] for more detail on best practices and tooling for video.js plugin authorship.
+
+When you've made your changes, push your commit(s) to your fork and issue a pull request against the original repository.
+
+### Running Tests
+
+Testing is a crucial part of any software project. For all but the most trivial changes (typos, etc) test cases are expected. Tests are run in actual browsers using [Karma][karma].
+
+- In all available and supported browsers: `npm test`
+- In a specific browser: `npm run test:chrome`, `npm run test:firefox`, etc.
+- While development server is running (`npm start`), navigate to [`http://localhost:9999/test/`][local]
+
+
+[karma]: http://karma-runner.github.io/
+[local]: http://localhost:9999/test/
+[conventions]: https://github.com/videojs/generator-videojs-plugin/blob/master/docs/conventions.md

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) mister-ben <git@misterben.me>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,117 @@
+# 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
+
+## Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Installation
+
+- [Installation](#installation)
+- [Plugin Options](#plugin-options)
+  - [Default options](#default-options)
+  - [Options](#options)
+- [Usage](#usage)
+  - [`<script>` Tag](#script-tag)
+  - [Browserify/CommonJS](#browserifycommonjs)
+  - [RequireJS/AMD](#requirejsamd)
+- [License](#license)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+## Installation
+
+```sh
+npm install --save videojs-mobile-ui
+```
+
+## Plugin Options
+
+### Default options
+
+```js
+{
+  fullscreen: {
+    enterOnRotate: true,
+    lockOnRotate: true
+  },
+  touchControls: {
+    seekSeconds: 10,
+    tapTimeout: 300,
+    disableOnEnd: false
+  }
+};
+```
+
+### Options
+
+- *fullscreen.enterOnRotate* `boolean` Whether to go fullscreen when rotating to landscape
+- *fullscreen.lockOnRotate* `boolean` Whether to lock to fullscreen when rotating to landscape
+- *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
+
+## 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][videojs], so that the `videojs` global is available.
+
+```html
+<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>
+```
+
+### Browserify/CommonJS
+
+When using with Browserify, install videojs-mobile-ui via npm and `require` the plugin as you would any other module.
+
+```js
+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();
+```
+
+### 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:
+
+```js
+require(['video.js', 'videojs-mobile-ui'], function(videojs) {
+  var player = videojs('my-video');
+
+  player.mobileUi();
+});
+```
+
+## License
+
+MIT. Copyright (c) mister-ben &lt;git@misterben.me&gt;
+
+
+[videojs]: http://videojs.com/

index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>videojs-mobile-ui Demo</title>
+  <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
+  <link href="dist/videojs-mobile-ui.css" rel="stylesheet">
+  <style>
+  .testEl {
+    width: 10%;
+    height: 10%;
+    position: absolute;
+    top: 0;
+    pointer-events: none;
+    display: none;
+  }
+  </style>
+</head>
+<body>
+  <video id="videojs-mobile-ui-player" class="video-js vjs-default-skin" controls>
+    <source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
+    <source src="//vjs.zencdn.net/v/oceans.webm" type='video/webm'>
+  </video>
+  <ul>
+    <li><a href="test/">Run unit tests in browser.</a></li>
+    <li><a href="docs/api/">Read generated docs.</a></li>
+  </ul>
+
+  <script src="node_modules/video.js/dist/video.js"></script>
+  <script src="dist/videojs-mobile-ui.js"></script>
+  <script>
+    (function(window, videojs) {
+      var testPlayer = window.testPlayer = videojs('videojs-mobile-ui-player');
+      testPlayer.endscreen = function() {};
+      testPlayer.mobileUi({});
+    }(window, window.videojs));
+  </script>
+</body>
+</html>

jsdoc.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["plugins/markdown"]
+}

lang/en.json

@@ -0,0 +1,3 @@
+{
+  "Include your own strings in JSON files.": "Include your own strings in JSON files."
+}