Merge pull request #529 from glowing-bear/add-video-support

Display ogv, mp4 and webm videos inside a video tag

css/glowingbear.css

@@ -309,6 +309,10 @@ div.embed img.embed {
     max-width: 100%;
 }
 
+video.embed {
+    max-width: 100%;
+}
+
 div.colourbox {
     display: inline-block;
     border-radius: 3px;

js/plugins.js

@@ -267,6 +267,15 @@ plugins.factory('userPlugins', function() {
         }
     });
 
+    /*
+     * mp4 video Preview
+     */
+    var videoPlugin = new UrlPlugin('video', function(url) {
+        if (url.match(/\.(mp4|webm|ogv)\b/i)) {
+            return '<video class="embed" width="560"><source src="'+url+'"></source></video>';
+        }
+    });
+
     /*
      * Cloud Music Embedded Players
      */
@@ -382,7 +391,7 @@ plugins.factory('userPlugins', function() {
     });
 
     return {
-        plugins: [youtubePlugin, dailymotionPlugin, allocinePlugin, imagePlugin, spotifyPlugin, cloudmusicPlugin, googlemapPlugin, asciinemaPlugin, yrPlugin, gistPlugin, tweetPlugin, vinePlugin]
+        plugins: [youtubePlugin, dailymotionPlugin, allocinePlugin, imagePlugin, videoPlugin, spotifyPlugin, cloudmusicPlugin, googlemapPlugin, asciinemaPlugin, yrPlugin, gistPlugin, tweetPlugin, vinePlugin]
     };
 
 

test/unit/plugins.js

@@ -71,6 +71,16 @@ describe('filter', function() {
             plugins);
         }));
 
+        it('should recognize html5 videos', inject(function(plugins) {
+            expectTheseMessagesToContain([
+                'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4',
+                'http://www.quirksmode.org/html5/videos/big_buck_bunny.webm',
+                'http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv',
+            ],
+            'video',
+            plugins);
+        }));
+
         it('should recognize images', inject(function(plugins) {
             expectTheseMessagesToContain([
                 'http://i.imgur.com/BTNIDBR.gif',