feat: add a custom video tag (#527)

DOCUMENTATION.md

@@ -385,21 +385,36 @@ E.g (rgba color) :
 
 #### Image
 
-Image tag is useful to add images and create beautiful galleries. Check what are the possibilities here : [Image tag demo](https://louisbarranqueiro.github.io/hexo-theme-tranquilpeak/2014/10/29/Tags-plugins-showcase/#Images)
+Image tag is useful to add images and create beautiful galleries. Check out some possibilities here : [Image tag demo](https://louisbarranqueiro.github.io/hexo-theme-tranquilpeak/2014/10/29/Tags-plugins-showcase/#Images)
 
 Syntax : `{% image [classes] group:group-name /path/to/image [/path/to/thumbnail] [width of thumbnail] [height of thumbnail] [title text] %}`  
 E.g : `{% image fancybox right clear group:travel image2.png http://google.fr/images/image125.png 150px 300px "A beautiful sunrise" %}`
 
 |Argument|Description|
 |---|---| 
-|Classes (optional)|You can add css classes to stylize the image. Separate class with whitespace. Tranquilpeak integrate many css class to create nice effects :  <ul><li><strong>fancybox</strong> : Generate a fancybox image.</li><li><strong>nocaption</strong> : Caption of the image will not be displayed.</li><li><strong>left</strong> : Image will float at the left.</li><li><strong>right</strong> : Image will float at the right.</li><li><strong>center</strong> : Image will be at center.</li><li><strong>fig-20</strong> : Image will take 20% of the width of post width and automatically float at left.</li><li><strong>fig-25</strong> : Image will take 25% of the width of post width and automatically float at left.</li><li><strong>fig-33</strong> : Image will take 33% of the width of post width and automatically float at left.</li><li><strong>fig-50</strong> : Image will take 50% of the width of post width and automatically float at left.</li><li><strong>fig-75</strong> : Image will take 75% of the width of post width and automatically float at left.</li><li><strong>fig-100</strong> : Image will take 100% of the width of post width.</li><li><strong>clear</strong> : Add a div with `clear:both;` style attached after the image to retrieve the normal flow of the post.</li></ul>|
+|Classes (optional)|You can add css classes to stylize the image. Separate class with whitespace. Tranquilpeak integrate many css class to create nice effects: <ul><li><strong>fancybox</strong> : Generate a fancybox image.</li><li><strong>nocaption</strong> : Caption of the image will not be displayed.</li><li><strong>left</strong> : Image will float at the left.</li><li><strong>right</strong> : Image will float at the right.</li><li><strong>center</strong> : Image will be at center.</li><li><strong>fig-20</strong> : Image will take 20% of the width of post width and automatically float at left.</li><li><strong>fig-25</strong> : Image will take 25% of the width of post width and automatically float at left.</li><li><strong>fig-33</strong> : Image will take 33% of the width of post width and automatically float at left.</li><li><strong>fig-50</strong> : Image will take 50% of the width of post width and automatically float at left.</li><li><strong>fig-75</strong> : Image will take 75% of the width of post width and automatically float at left.</li><li><strong>fig-100</strong> : Image will take 100% of the width of post width.</li><li><strong>clear</strong> : Add a div with `clear:both;` style attached after the image to retrieve the normal flow of the post.</li></ul>|
 |Group (optional)| Name of a group, used to create a gallery. **Only for image with `fancybox` css class**|
 |Orignal image| Path to the original image.|
 |Thumbnail image (optional)| Path to the thumbnail image. If empty, the orignal image will be displayed.|
 |Width of thumbnail image (optional)| Width to the thumbnail image. If the thumbnail image is empty, width will be attached to thumbnail image created from original image. E.g : `150px` or `85%`.|
 |Height of thumbnail image (optional)| Height to the thumbnail image. If the thumbnail image is empty, height will be attached to thumbnail image created from original image. E.g : `300px` or `20%`.|
 |Title (optional)| Title of image displayed in a caption under image. `Alt` HTML attribute will use this title. E.g : `"A beautiful sunrise"`.|
 
+#### Video
+
+The video tag provides a convenient way to showcase self-hosted videos. Take a look at some examples here: [Video Tag Demo](https://louisbarranqueiro.github.io/hexo-theme-tranquilpeak/2014/10/29/Tags-plugins-showcase/#Video)
+
+Syntax : `{% video [classes] videoURL [Optional Poster (Thumbnail) URL] [Width] [Caption] %}`
+E.g : `{% video center https://example.com/video.mp4 https://example.com/video-poster.jpg 100% Poster (Thumbnail) Enabled %}`
+
+|Argument|Description|
+|---|---| 
+|Classes (optional)|Make sure to separate your class properties with whitespaces. Tranquilpeak integrates many css classes to create nice effects: <ul><li><strong>left</strong> : Video will float at the left (default alignment).</li><li><strong>right</strong> : Video will float at the right.</li><li><strong>center</strong> : Video will be at center.</li><li><strong>clear</strong> : Add a div with `clear:both;` style attached after the image to retrieve the normal flow of the post.</li><li><strong>nocaption</strong> : the provided caption will not be displayed.</li><li><strong>loop</strong> : once over, the video will playback from the beginning.</li><li><strong>nocontrols</strong> : The video's default controls will be hidden. Most browsers still make them accessible by right clicking on the video.</li><li><strong>autoplay</strong> : Video will autoplay on page load. <strong>must be used with the 'mute' class</strong> to obey browser standards. Most likely will not work otherwise.</li><li><strong>muted</strong> : The video will be muted</li></li><li><strong>fig-20</strong> : Image will take 20% of the width of post width and automatically float at left.</li><li><strong>fig-25</strong> : Image will take 25% of the width of post width and automatically float at left.</li><li><strong>fig-33</strong> : Image will take 33% of the width of post width and automatically float at left.</li><li><strong>fig-50</strong> : Image will take 50% of the width of post width and automatically float at left.</li><li><strong>fig-75</strong> : Image will take 75% of the width of post width and automatically float at left.</li><li><strong>fig-100</strong> : Image will take 100% of the width of post width.</li></ul>|
+|videoURL| Path to the original video.|
+|Poster image (optional thumbnail)| Path to the thumbnail image. If empty, the initial frame of video will be displayed.|
+|Width of thumbnail image (optional)| Width of the video frame. E.g : `85%`.|
+|Caption (optional)| Title of image displayed in a caption under image. `Alt` HTML attribute will use this title. E.g : `"A beautiful sunrise"`.|
+
 #### Tabbed code block
 
 Tabbed code blocks are useful to group multiple code blocks related. For example, the source code of a web component (html, css and js). Or compare a source code in different languages.

scripts/tags/video.js

@@ -0,0 +1,120 @@
+(function() {
+  'use strict';
+
+  var rPath = new RegExp(
+    '((([A-Za-z]{3,9}:(?:\\/\\/)?)(?:[-;:&=+$,\\w]+@)?' +
+    '[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\\w]+@)[A-Za-z0-9.-]+)' +
+    '((?:\\/[\\+~%\\/.\\w-_]*)?\\??(?:[-+=&;%@.\\w_]*)' +
+    '#?(?:[.!\\/\\w]*))|^[A-Za-z0-9_\\/-]+\\.\\w{2,4})');
+  var rClass = /^[_a-zA-Z0-9-]+$/;
+  var rSize = /^\d+(?:|\.\d+)(?:px|%)?$/;
+  var captionClass = 'caption';
+  var noCaptionClass = 'nocaption';
+  var clearClass = 'clear';
+  var autoplayClass = 'autoplay';
+  var loopClass = 'loop';
+  var mutedClass = 'muted';
+  var noControlsClass = 'nocontrols';
+  var figureClass = 'figure';
+  var videoClasses = [
+    captionClass,
+    noCaptionClass,
+    autoplayClass,
+    loopClass,
+    mutedClass,
+    noControlsClass
+  ];
+  /**
+   * Video tag
+   *
+   * Syntax:
+   *     {% video [classes] videoURL [Optional Poster (Thumbnail) URL]
+   *     [Width] [Caption] %}
+   * E.g:
+   *     {% video loop http://example.com/video145.mp4
+   *     http://example.com/image.png 95% "A beautiful sunrise" %}
+   */
+  hexo.extend.tag.register('video', function(args) {
+    var original;
+    var poster = '';
+    var width = '';
+    var classes = [];
+    var html = '';
+    var clear = '';
+    // Get CSS classes
+    while (args.length && rClass.test(args[0])) {
+      classes.push(args.shift());
+    }
+
+    // Get path of original video
+    original = args.shift();
+
+    // Get path of poster image
+    if (args.length && rPath.test(args[0])) {
+      poster = args.shift();
+    }
+
+    // Get width of video
+    if (args.length && rSize.test(args[0])) {
+      width = args.shift();
+    }
+
+    // Get title of video
+    var title = args.join(' ');
+
+    // Build the video HTML structure
+    var video = '<video class="fig-video" ';
+    if (classes.includes(autoplayClass)) {
+      video += 'autoplay playsinline ';
+    }
+    if (classes.includes(loopClass)) {
+      video += 'loop ';
+    }
+    if (classes.includes(mutedClass)) {
+      video += 'muted ';
+    }
+    if (!classes.includes(noControlsClass)) {
+      video += 'controls ';
+    }
+    if (poster !== '') {
+      video += 'poster="' + poster + '" ';
+    }
+    video += 'alt="' + title + '">\n';
+    video += '<source src="' + original + '" type="video/mp4">\n';
+    video += '<p>Your browser doesn\'t support HTML5 Video :/</p>';
+    video += '</video>';
+
+    // Build div to retrieve normal flow of document
+    if (classes.includes(clearClass)) {
+      clear = '<div style="clear:both;"></div>';
+      // remove `clear` class of `classes` to not be attached on the main div
+      classes.splice(classes.indexOf(clearClass), 1);
+    }
+
+    // remove all video-related classes to only have style-related classes
+    videoClasses.forEach(function(videoClass) {
+      if (classes.includes(videoClass)) {
+        classes.splice(classes.indexOf(videoClass), 1);
+      }
+    });
+
+    // Build HTML structure
+    html += '<div class="' + figureClass + ' ' + classes.join(' ') + '" ';
+    html += width ? 'style="width:' + width + '"; ' : '';
+    html += '>\n';
+    html += video;
+
+    // Add caption
+    if (title && !classes.includes(noCaptionClass)) {
+      html += '\n<span class="' + captionClass + '">';
+      html += title + '';
+      html += '</span>';
+    }
+
+    html += '\n</div>';
+
+    // add `clear` div if previously specified
+    html += clear;
+    return html;
+  });
+})();

source/_css/components/_figure.scss

@@ -18,6 +18,10 @@
         float:  right;
         margin: 2px;
     }
+    .fig-video {
+        width: 100%;
+        height: auto;
+    }
     &.fig-20 {
         @extend .left;
         width: calc(20% - 4px);