Merge pull request #2 from raccoongang/feature/wistiavideo

https://trello.com/c/FzphTE0f/4-support-wistia

setup.py

@@ -38,6 +38,7 @@ def package_data(pkg, roots):
         ],
         'video_xblock.v1': [
             'youtube-player = video_xblock:YoutubePlayer',
+            'wistia-player = video_xblock:WistiaPlayer',
             'brightcove-player = video_xblock:BrightcovePlayer',
             'dummy-player = video_xblock:DummyPlayer',
         ]

video_xblock/static/html/wistiavideo.html

@@ -0,0 +1,2 @@
+<video id="vid1" muted="muted" src="" class="video-js vjs-default-skin" preload="auto" width="640" height="264" data-setup='{ "techOrder": ["wistia"], "sources": [{ "type": "video/wistia", "src": "{{ url }}" }] }'>
+</video>

video_xblock/static/html/youtube.html

@@ -6,6 +6,6 @@
       autoplay
   {% endif %}
   width="640" height="264"
-  data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "{{ url }}"}], "youtube": { "iv_load_policy": 1 } }'
+  data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "{{ url }}"}], "youtube": { "iv_load_policy": 1 }, "playbackRates": [0.5, 1, 1.5, 2] }'
 >
 </video>

video_xblock/static/videojs-wistia/.gitignore

@@ -0,0 +1,8 @@
+# Windows image file caches
+Thumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Mac crap
+.DS_Store

video_xblock/static/videojs-wistia/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 ryanpatrickcook
+
+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.
+

video_xblock/static/videojs-wistia/README.md

@@ -0,0 +1,71 @@
+# Video.js - Wistia Source Support
+Allows you to use Wistia URL as source with [Video.js](https://github.com/videojs/video-js/).
+
+[Video.js 5 Example](http://ryanpatrickcook.github.io/videojs-wistia/) |
+[Video.js 4 Example](http://ryanpatrickcook.github.io/videojs-wistia/index-vjs4.html)
+
+## How does it work?
+Including the script vjs.wistia.js will add the Wistia as a tech. You just have to add it to your techOrder option. [Wistia Javascript Player API docs](http://wistia.com/doc/player-api).
+
+Here is an example of how to use with Javascript events:
+
+    videojs('vid2', {
+      "techOrder": ["wistia"],
+      "sources": [{
+        "type": "video/wistia",
+        "src": "http://fast.wistia.com/embed/iframe/b0767e8ebb?version=v1&controlsVisibleOnLoad=false&playerColor=aae3d8"
+      }]
+    }).ready(function() {
+      this.on('pause', function() {
+        document.body.style.backgroundColor = '#ffcccc';
+        console.log("video.js - pause");
+      });
+
+      this.on('play', function() {
+        document.body.style.backgroundColor = '#eafeea';
+        console.log("video.js - play");
+      });
+
+      this.on('seeked', function() {
+        console.log("video.js - seeked");
+      });
+
+      this.on('volumechange', function() {
+        console.log("video.js - volumechange");
+      });
+
+      this.one('ended', function() {
+        console.log("video.js - ended");
+        this.src("https://home.wistia.com/medias/oefj398m6q?playerColor=ff0000");
+        this.play();
+      });
+    });
+
+If you're using video.js 4 (use the `video-js-4` branch) - Javascript events
+
+    videojs('videoId', {
+      "techOrder": ["wistia"],
+      "src": "http://fast.wistia.com/embed/iframe/b0767e8ebb"
+    }).ready(function() {
+      this.on('pause', function() {
+        console.log("video.js - pause");
+      });
+
+      this.on('play', function() {
+        console.log("video.js - play");
+      });
+
+      this.on('seeked', function() {
+        console.log("video.js - seeked");
+      });
+
+      this.on('volumechange', function() {
+        console.log("video.js - volumechange");
+      });
+    });
+
+
+## Supported URLs
+http://fast.wistia.com/embed/iframe/:id
+
+http://home.wistia.com/medias/:id

video_xblock/static/videojs-wistia/bower.json

@@ -0,0 +1,10 @@
+{
+  "name": "videojs-wistia",
+  "version": "2.0.0",
+  "main": ["vjs.wistia.js"],
+  "description": "Allows you to use Wistia URL as source with Video.js.",
+  "license": "MIT",
+  "dependencies": {
+    "video.js": "~5.10"
+  }
+}

video_xblock/static/videojs-wistia/example/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="../lib/video-js.css" rel="stylesheet" />
+</head>
+<body style="background-color: #eee;">
+  <video id="vid1" muted="muted" src="" class="video-js vjs-default-skin" preload="auto" width="640" height="360" data-setup='{ "techOrder": ["wistia"], "sources": [{ "type": "video/wistia", "src": "https://home.wistia.com/medias/e4a27b971d?autoplay=true" }] }'>
+    <p>Video Playback Not Supported</p>
+  </video>
+
+  <br />
+
+  <video id="vid2" src="" class="video-js vjs-default-skin" preload="auto" width="640" height="360">
+    <p>Video Playback Not Supported</p>
+  </video>
+
+  <script src="../lib/video.js"></script>
+  <script src="../src/wistia.js"></script>
+  <script>
+  videojs('vid2', {
+    "techOrder": ["wistia"],
+    "sources": [{
+      "type": "video/wistia",
+      "src": "http://fast.wistia.com/embed/iframe/b0767e8ebb?version=v1&controlsVisibleOnLoad=false&playerColor=aae3d8"
+    }]
+  }).ready(function() {
+    this.on('pause', function() {
+      document.body.style.backgroundColor = '#ffcccc';
+      console.log("video.js - pause");
+    });
+
+    this.on('play', function() {
+      document.body.style.backgroundColor = '#eafeea';
+      console.log("video.js - play");
+    });
+
+    this.on('seeked', function() {
+      console.log("video.js - seeked");
+    });
+
+    this.on('volumechange', function() {
+      console.log("video.js - volumechange");
+    });
+
+    this.one('ended', function() {
+      console.log("video.js - ended");
+      this.src("https://home.wistia.com/medias/oefj398m6q?playerColor=ff0000");
+      this.play();
+    });
+  });
+  </script>
+</body>
+</html>

video_xblock/static/videojs-wistia/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "videojs-wistia",
+  "version": "2.0.0",
+  "description": "Allows you to use Wistia URL as source with Video.js.",
+  "main": "vjs.wistia.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ryanpatrickcook/videojs-wistia.git"
+  },
+  "scripts": {
+    "dist": "mkdir -p dist && cp src/wistia.js dist/wistia.js && uglifyjs src/wistia.js -o dist/wistia.min.js",
+    "build": "uglifyjs src/wistia.js -o vjs.wistia.js"
+  },
+  "devDependencies": {
+    "uglify-js": "^2.4.23"
+  },
+  "keywords": [
+    "video.js",
+    "wistia",
+    "plugin"
+  ],
+  "author": "Ryan Cook <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ryanpatrickcook/videojs-wistia/issues"
+  },
+  "homepage": "https://github.com/ryanpatrickcook/videojs-wistia#readme"
+}