Skip to content

Commit

Permalink
convert this project to generator-videojs-plugin conventions
Browse files Browse the repository at this point in the history
  • Loading branch information
brandonocasey committed Jul 25, 2017
1 parent 47a7eee commit 280a339
Show file tree
Hide file tree
Showing 34 changed files with 1,820 additions and 52,520 deletions.
13 changes: 13 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# http://editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false
37 changes: 33 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,34 @@
/node_modules/
/bower_components/
# OS
Thumbs.db
ehthumbs.db
Desktop.ini
.DS_Store
/samples/
yarn.lock
._*

# Editors
*~
*.swp
*.tmproj
*.tmproject
*.sublime-*
.idea/
.project/
.settings/
.vscode/

# Logs
logs
*.log
npm-debug.log*

# Dependency directories
bower_components/
node_modules/

# Yeoman meta-data
.yo-rc.json

# Build-related directories
dist/
docs/api/
test/dist/
3 changes: 3 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Intentionally left blank, so that npm does not ignore anything by default,
# but relies on the package.json "files" array to explicitly define what ends
# up in the package.
17 changes: 17 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
sudo: false
dist: trusty
language: node_js
node_js:
- 'node'
- 'lts/argon'
before_script:
- export CHROME_BIN=/usr/bin/google-chrome
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
Empty file added CHANGELOG.md
Empty file.
30 changes: 30 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# CONTRIBUTING

We welcome contributions from everyone!

## Getting Started

Make sure you have NodeJS 0.10 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
File renamed without changes.
122 changes: 86 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,41 +1,102 @@
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*

- [VR](#vr)
- [Installation](#installation)
- [Usage](#usage)
- [`<script>` Tag](#script-tag)
- [Browserify/CommonJS](#browserifycommonjs)
- [RequireJS/AMD](#requirejsamd)
- [Optional integration with videojs-errors](#optional-integration-with-videojs-errors)
- [Passing a projection on a source by source basis](#passing-a-projection-on-a-source-by-source-basis)
- [Oculus Rift and HTC Vive Support](#oculus-rift-and-htc-vive-support)
- [Accessing the Camera Position](#accessing-the-camera-position)
- [Accessing THREE.js objects](#accessing-threejs-objects)
- [Credits](#credits)
- [Support](#support)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->


# VR

A video.js plugin that turns a video element into a HTML5 Panoramic 360 video player. Project video onto different shapes. Optionally supports Oculus Rift, HTC Vive and the GearVR.

[View Demo](https://videojs-vr.s3.amazonaws.com/latest/example.html)

## Installation

### Build
```
npm install
npm run build
```sh
npm install --save videojs-vr
```

### Run
## Usage

To include videojs-vr 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-vr.min.js"></script>
<script>
var player = videojs('my-video');
player.vr({projection: '360'});
</script>
```
npm run serve

### Browserify/CommonJS

When using with Browserify, install videojs-vr 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-vr');

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

player.vr({projection: '360'});
```

## Examples
To test locally, visit localhost:3000/example-external.html or localhost:3000/example-videocloud.html
### 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-vr'], function(videojs) {
var player = videojs('my-video');

player.vr({projection: '360'});
});
```

## Setting up your own player
### Optional integration with videojs-errors
If the [videojs-errors](https://github.com/brightcove/videojs-errors) plugin is intialized before `videojs-vr`, then it will be used to display errors to users.

Include the following script imports:
### Passing a projection on a source by source basis
Set `player.mediainfo` and `player.mediainfo.projection` to a valid projection value and pass in 'AUTO' or nothing for the `projection` key when initializing this plugin.
EX:
```js
var player = videojs('my-video');

<script src="./dist/videocloud.vr.js"></script>
if (!player.mediainfo) {
player.mediainfo = {};
}

Host all video content on a HTTP Server that supports byte range requests if you want the seek bar to work (e.g. Apache).
if (!player.mediainfo.projection) {
player.mediainfo.projection = '360';
}

### Projections
- 360
- 360_LR
- 360_TB
- CUBE
- AUTO - will attempt to retrieve metadata from VideoCloud Video, and if present will start plugin otherwise defaults to NONE
- NONE - plugin doesnt run and renders the video flat
player.vr({projection: 'AUTO'});

// or player.vr(); since 'AUTO' is the default
```

## Oculus Rift and HTC Vive Support
This plugin leverages the [webvr-boilerplate](https://github.com/borismus/webvr-boilerplate) project (which in turn uses [webvr-polyfill](https://github.com/borismus/webvr-polyfill) and [three.js](https://github.com/mrdoob/three.js)) to create a 'responsive VR' experience across multiple devices.
Expand All @@ -50,7 +111,7 @@ The Three.js rotation values are exposed under the property `cameraVector` on th
For example, assuming the parent element for Video.js is `#video-container` the following code would return the current `cameraVector` values:

document.getElementById('video-container').player.vr.cameraVector

See `example-camera.html` for a working demo that logs camera object and rotation to the console every second.

## Accessing THREE.js objects
Expand All @@ -63,13 +124,13 @@ For example, assuming the parent element for Video.js is `#video-container` the
while:

document.getElementById('video-container').player.vr.threeJs.scene

would return the THREE.js Scene, and:

document.getElementById('video-container').player.vr.threeJs.renderer

would return the THREE.js renderer.


## Credits ##

Expand All @@ -82,14 +143,3 @@ This project is a conglomeration of a few amazing open source libraries.

## Support ##
This work is sponsored by [Brightcove](https://www.brightcove.com), [HapYak](http://corp.hapyak.com/) and [StreamShark](https://streamshark.io)


## Release History

* 0.3.4
* 0.3.3
* 0.3.2
* 0.3.1
* 0.3.0
* 0.2.2
* 0.2.0
23 changes: 0 additions & 23 deletions dist/videocloud.vr.css

This file was deleted.

Loading

0 comments on commit 280a339

Please sign in to comment.