Use looping video as your animated gif
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 5 commits ahead of stephenmkbrady:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
index.js
package.json

README.md

hexo-tag-optimized-gif

Add embedded html5 video to hexo, but treat it like a GIF.

Maybe you are recording GIFs for your blog but the GIF files are too big and many of them are eating up band width from your free plan CDN? An optimization is to use some kind of CDN like Cloudinary which is able to covert your uploaded GIF into smaller MP4 or WebM video file by just changing extension of your file URI.

This tag will add a <video> tag with autoplay and loop attributes when generation, helping you achieve the optimization.

Installation

$ npm install hexo-tag-optimized-gif --save

Usage

{% mp4gif [div_class] your_URI %}
or 
{% webmgif [div_class] your_URI %}
Arg Description
div_class(Optional) Multiple class names supported (using "" to wrap names). If this class name is specified, a div wrapper is created and its class is div_class.
your_URI Just put your GIF link here and the URI extension replacement will be handled internally.

Configuration

Add the following lines into your hexo _config.yml file:

hexo_tag_optimized_gif:
  enable_poster: false
  video_css_class: [your class name]
  • enable_poster: whether to use poster attribute for <video> tag. With it enabled, the picture coverted from your URI by CDN is shown while video is downloading.
  • video_css_class: the class name you specify for <video> tag.

Other default settings of <video> attributes are listed below:

Attribute Default setting
width untouched
height untouched
muted true
poster empty string, if enable_poster is true, it's the URI with extension replaced by jpg.

This tag plugin is compatible with the orginal hexo-tag-html5 plugin.

License

MIT