├── 360.gif
├── .npmignore
├── .gitignore
├── rollup.config.js
├── index.html
├── LICENSE
├── README.md
├── src
└── index.js
└── package.json
/360.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiagopnts/clappr-video360/HEAD/360.gif
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | 360.gif
2 | index.html
3 | .*.swp
4 | ._*
5 | .DS_Store
6 | .git
7 | .hg
8 | .npmrc
9 | npm-debug.log
10 |
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import babel from 'rollup-plugin-babel';
2 | import commonjs from 'rollup-plugin-commonjs';
3 | import nodeResolve from 'rollup-plugin-node-resolve';
4 | import strip from 'rollup-plugin-strip';
5 |
6 |
7 | export default {
8 | entry: 'src/index.js',
9 | external: ['clappr'],
10 | globals: {'clappr': 'Clappr'},
11 | acorn: {
12 | allowReserved: true,
13 | },
14 | plugins: [
15 | nodeResolve({
16 | jsnext: true,
17 | browser: true,
18 | }),
19 | strip({debugger: true, sourceMap: false}),
20 | commonjs(),
21 | babel(),
22 | ],
23 | output: {
24 | file: 'dist/clappr-video360.js', format: 'umd', name: 'Video360'
25 | },
26 | };
27 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | clappr-video360
6 |
7 |
8 |
9 |
10 |
11 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Thiago Pontes
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # clappr-video360
2 | clappr-video360 is a plugin for playing 360 videos with Clappr.
3 |
4 | 
5 |
6 |
7 | [Demo](http://thiago.me/clappr-video360/)
8 |
9 |
10 |
11 | It's built on top of [Kaleidoscope](https://github.com/thiagopnts/kaleidoscope), so it supports
12 | the same browsers the lib supports.
13 |
14 | ### Building:
15 |
16 | ```
17 | $ npm install
18 | $ npm run build
19 | ```
20 |
21 | ### Using:
22 | Get the code:
23 | ```bash
24 | $ npm install clappr clappr-video360
25 | ```
26 | Add the library and Clappr to your page:
27 |
28 | ```html
29 |
30 |
31 | ```
32 |
33 | Then:
34 | ```javascript
35 | var p = new Clappr.Player({
36 | source: 'your-equirectangular-video.mp4',
37 | plugins: {
38 | container: [Video360],
39 | },
40 | parentId: '#player',
41 | });
42 | // for better usability, disable clappr's click_to_pause plugin
43 | p.getPlugin('click_to_pause').disable();
44 | ```
45 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 |
2 | import {Video} from 'kaleidoscopejs';
3 | import {ContainerPlugin, Mediator, Events} from 'clappr';
4 |
5 | export default class Video360 extends ContainerPlugin {
6 | constructor(container) {
7 | super(container);
8 | Mediator.on(`${this.options.playerId}:${Events.PLAYER_RESIZE}`, this.updateSize, this);
9 | let {height, width, autoplay} = container.options;
10 | container.playback.el.setAttribute('crossorigin', 'anonymous');
11 | container.playback.el.setAttribute('preload', 'metadata');
12 | container.playback.el.setAttribute('playsinline', 'true');
13 | container.el.style.touchAction = "none";
14 | container.el.addEventListener("touchmove", function(event) {
15 | event.preventDefault();
16 | }, false);
17 | this.viewer = new Video({height: isNaN(height) ? 300 : height, width: isNaN(width) ? 400 : width, container: this.container.el, source: this.container.playback.el});
18 | this.viewer.render();
19 | }
20 |
21 | get name() {
22 | return 'Video360';
23 | }
24 |
25 | updateSize() {
26 | setTimeout(() =>
27 | this.viewer.setSize({height: this.container.$el.height(), width: this.container.$el.width()})
28 | , 250)
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "clappr-video360",
3 | "version": "0.1.1",
4 | "description": "360 video plugin for Clappr",
5 | "main": "dist/clappr-video360.min.js",
6 | "babel": {
7 | "presets": [
8 | [
9 | "@babel/env",
10 | {
11 | "modules": false
12 | }
13 | ]
14 | ],
15 | "env": {
16 | "production": {
17 | "presets": [
18 | "minify"
19 | ]
20 | }
21 | },
22 | "plugins": [
23 | "@babel/plugin-external-helpers"
24 | ]
25 | },
26 | "dependencies": {
27 | "kaleidoscopejs": "^1.1.1",
28 | "clappr": "0.2.57"
29 | },
30 | "devDependencies": {
31 | "@babel/core": "^7.1.5",
32 | "@babel/plugin-external-helpers": "^7.0.0",
33 | "@babel/preset-env": "^7.1.5",
34 | "babel-preset-minify": "^0.5.0",
35 | "rollup": "^0.67.0",
36 | "rollup-plugin-babel": "^4.0.3",
37 | "rollup-plugin-commonjs": "^9.2.0",
38 | "rollup-plugin-node-resolve": "^3.4.0",
39 | "rollup-plugin-strip": "^1.2.0",
40 | "rollup-plugin-uglify": "^6.0.0",
41 | "sinon": "^7.1.1",
42 | "uglify-js": "^3.4.9",
43 | "webpack": "^3.11.0"
44 | },
45 | "scripts": {
46 | "build": "BABEL_ENV=production rollup -c && cat dist/clappr-video360.js | uglifyjs -m -c > dist/clappr-video360.min.js",
47 | "test": "echo \"Error: no test specified\" && exit 1"
48 | },
49 | "repository": {
50 | "type": "git",
51 | "url": "git+https://github.com/thiagopnts/clappr-video360.git"
52 | },
53 | "keywords": [
54 | "clappr",
55 | "360",
56 | "video"
57 | ],
58 | "author": "Thiago Pontes ",
59 | "license": "MIT",
60 | "bugs": {
61 | "url": "https://github.com/thiagopnts/clappr-video360/issues"
62 | },
63 | "homepage": "https://github.com/thiagopnts/clappr-video360#readme"
64 | }
65 |
--------------------------------------------------------------------------------