Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
videojs-vimeo
Advanced tools
videojs-vimeo - npm Package Compare versions
Comparing version 1.0.2 to 2.0.0
| { | ||
| "name": "videojs-vimeo", | ||
| "version": "1.0.2", | ||
| "main": ["vjs.vimeo.js"], | ||
| "version": "2.0.0", | ||
| "main": ["src/Vimeo.js"], | ||
| "description": "Allows you to use Vimeo URL as source with Video.js.", | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "video.js": "~4.10" | ||
| "video.js": "^5.0.0" | ||
| } | ||
| } |
| { | ||
| "name": "videojs-vimeo", | ||
| "version": "1.0.2", | ||
| "version": "2.0.0", | ||
| "description": "Allows you to use Vimeo URL as source with Video.js.", | ||
| "main": "vjs.vimeo.js", | ||
| "main": "src/Vimeo.js", | ||
| "scripts": { | ||
@@ -7,0 +7,0 @@ "test": "echo \"Error: no test specified\" && exit 1" |
137
README.md
@@ -1,59 +0,96 @@ | ||
| ## Now fully support VideoJS 4.3.0! | ||
| # Vimeo Playback Technology<br />for [Video.js](https://github.com/videojs/video.js) | ||
| # Video.js - Vimeo Source Support | ||
| Allows you to use Vimeo URL as source with [Video.js](https://github.com/zencoder/video-js/). | ||
| ## Install | ||
| You can use bower (`bower install videojs-vimeo`), npm (`npm install videojs-vimeo`) or the source and build it using `npm run build`. Then, the only file you need is dist/Vimeo.min.js. | ||
| ## Version Note | ||
| Use branch `vjs4` if you still using old VideoJS `v4.x`. | ||
| ## Example | ||
| ```html | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <link type="text/css" rel="stylesheet" href="../node_modules/video.js/dist/video-js.min.css" /> | ||
| </head> | ||
| <body> | ||
| <video | ||
| id="vid1" | ||
| class="video-js vjs-default-skin" | ||
| controls | ||
| autoplay | ||
| width="640" height="264" | ||
| data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "https://vimeo.com/153979733"}] }' | ||
| > | ||
| </video> | ||
| <script src="../node_modules/video.js/dist/video.min.js"></script> | ||
| <script src="../dist/Vimeo.min.js"></script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| See the examples folder for more | ||
| ## How does it work? | ||
| Including the script vjs.vimeo.js will add the Vimeo as a tech. You just have to add it to your techOrder option. | ||
| Including the script Vimeo.min.js will add the Vimeo as a tech. You just have to add it to your techOrder option. Then, you add the option src with your Vimeo URL. | ||
| Here is 2 examples: | ||
| 1. using loop | ||
| 2. using JavaScript events | ||
| It supports: | ||
| - vimeo.com as well as youtu.be | ||
| - Regular URLs: https://vimeo.com/153979733 | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <link href="video-js.min.css" rel="stylesheet" /> | ||
| </head> | ||
| <body> | ||
| <video id="vid1" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" data-setup='{ "techOrder": ["vimeo"], "src": "https://vimeo.com/63186969", "loop": true, "autoplay": false }'> | ||
| <p>Video Playback Not Supported</p> | ||
| </video> | ||
| <br /> | ||
| <video id="vid2" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360"> | ||
| <p>Video Playback Not Supported</p> | ||
| </video> | ||
| <script src="video.js"></script> | ||
| <script src="vjs.vimeo.js"></script> | ||
| <script> | ||
| videojs('vid2', { "techOrder": ["vimeo"], "src": "https://vimeo.com/63186969" }).ready(function() { | ||
| // You can use the video.js events even though we use the vimeo controls | ||
| // As you can see here, we change the background to red when the video is paused and set it back when unpaused | ||
| this.on('pause', function() { | ||
| document.body.style.backgroundColor = 'red'; | ||
| }); | ||
| this.on('play', function() { | ||
| document.body.style.backgroundColor = ''; | ||
| }); | ||
| // You can also change the video when you want | ||
| // Here we cue a second video once the first is done | ||
| this.one('ended', function() { | ||
| this.src('http://vimeo.com/79380715'); | ||
| this.play(); | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ## Options | ||
| It supports every regular Video.js options. Additionally, you can change any [Vimeo parameter](https://developers.google.com/vimeo/player_parameters?hl=en#Parameters). Here is an example of setting the `iv_load_policy` parameter to `1`. | ||
| ## Additional Informations | ||
| We cannot hide the Vimeo controls bar, they do not allow it. | ||
| ```html | ||
| <video | ||
| id="vid1" | ||
| class="video-js vjs-default-skin" | ||
| controls | ||
| autoplay | ||
| width="640" height="264" | ||
| data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "https://vimeo.com/153979733"}], "vimeo": { "iv_load_policy": 1 } }' | ||
| > | ||
| </video> | ||
| ``` | ||
| ## Warning | ||
| It will not run properly without a Web server. | ||
| ### Vimeo controls | ||
| Because `controls` is already a Video.js option, to use the Vimeo controls, you must set the `ytControls` parameter. | ||
| ```html | ||
| <video | ||
| id="vid1" | ||
| class="video-js vjs-default-skin" | ||
| controls | ||
| autoplay | ||
| width="640" height="264" | ||
| data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "https://vimeo.com/153979733"}], "vimeo": { "ytControls": 2 } }' | ||
| > | ||
| </video> | ||
| ``` | ||
| ##Special Thank You | ||
| Thanks to John Hurliman for the original code on the old Video.js | ||
| Thanks to Steve Heffernan for the amazing Video.js and to John Hurliman for the original version of the Vimeo tech | ||
| ## License | ||
| The MIT License (MIT) | ||
| Copyright (c) 2014-2015 Benoit Tremblay <trembl.ben@gmail.com> | ||
| 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. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.69%
7752
- Number of lines in readme file
- increased by64.41%
97
Worsened metrics
- Total package byte prevSize
- decreased by-0.64%
376847
- Number of package files
- decreased by-5%
19
No dependency changes