Alex McFarlane

Useful Stuff

Adding a Video to a GitHub Readme (and Jekyll Blogs)

on Adding Video GitHub Readme
The cost is negative of what is should be but I reversed it in the SGD algorithm so it doesn't matter

Basic instructions on how to use ffmpeg to embed a user friendly video from a series of plots into a README.md in GitHub.

Requirements

  • Mac user (can use apt-get on Linux for installs)
  • convert

Get convert with homebrew as

brew install imagemagick

Creating an Animation

convert -delay 10 -loop 0 input*.png output.gif
  • -delay 10 means 10*10msso a delay of a -delay 100 is 1s
  • -loop 0 states there is no pause before looping

If you find your .gif is too large then the size can be significantly reduced with

 convert input.gif \
     -fuzz 10% -layers Optimize \
     output.gif

In my example this reduced the size from a whopping 147MB to 3MB!

Dynamic Movie format for Jekyll Sites

This won’t work for Github README files but it is worth stating anyway for Jekyll based sites that use markdown.

A nice movie format

Requirements

Get ffmpeg with

 brew install ffmpeg --with-libvpx

if you obtain an error of Unknown encoder 'libvpx'
or Unknown encoder 'libtheora' then you need to do

 brew reinstall ffmpeg --with-libvpx --with-theora --with-libvorbis

Movie from Plots

I assume that images are outputted by a plotting software such as gnuplot of mathplotlib at regular intervals. They should be numbered sequentially.

ffmpeg -r 60 -f image2 -s 1920x1080 \
    -pattern_type glob -i 'input*' \
    -vcodec libx264 -crf 25  -pix_fmt yuv420p \
    output.mp4
  • -r 60 this sets the framerate to 60fps
  • -pattern_type glob -i 'input*' matches all files with input and reads in order
  • output.mp4 output file name
  • -s 1920x1080 set the output resolution

Dynamically resize

Some browsers don’t recognise .mp4 files forcing the use of a Flash plugin. This format allows HTML5 to use its default plugin

ffmpeg -i input.mp4 \
    -vcodec libvpx -acodec libvorbis \
    output.webm

The following format is also necessary for multi-browser support

ffmpeg -i visualise_params.mp4 \
    -c:v libtheora -c:a libvorbis -q:v 10 -q:a 10 \
    visualise_params.ogv

Adding the CSS

Add the css code to _sass/call_me_what_you_like.scss

// Adds support for a video holder
// as per http://webdesignerwall.com/tutorials/css-elastic-videos

.myvideo {
position : relative;
display : block;
width : 30%;
min-width : 200px;
margin : auto;
height : auto;
}
.flex-video {
position : relative;
padding-bottom : 67.5%;
height : 0;
overflow : hidden;
}
.flex-video iframe, .flex-video object, .flex-video embed {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
}

Adding the HTML

The following HTML will then generate the correct video in your Jekyll site.

<div class="myvideo">
   <video  style="display:block; width:100%; height:auto;" autoplay controls loop="loop">
       <source src="{{ site.baseurl }}/media/2016-10-24-add-video-to-github-README/visualise_params.mp4" type="video/mp4" />
       <source src="{{ site.baseurl }}/media/2016-10-24-add-video-to-github-README/visualise_params.ogv" type="video/ogg" />
       <source src="{{ site.baseurl }}/media/2016-10-24-add-video-to-github-README/visualise_params.webm"  type="video/webm"  />
   </video>
</div>

In this actual case I also wrapped the <div> tag within a <figure> tag that is provided in this site’s template

<figure class="large">
    <div class="myvideo">
       <video  style="display:block; width:100%; height:auto;" autoplay controls loop="loop">
           <source src="/media/2016-10-24-add-video-to-github-README/visualise_params.mp4" type="video/mp4" />
           <source src="/media/2016-10-24-add-video-to-github-README/visualise_params.ogv" type="video/ogg" />
           <source src="/media/2016-10-24-add-video-to-github-README/visualise_params.webm"  type="video/webm"  />
       </video>
    </div>
<figcaption>A nice movie format</figcaption>
</figure>

References

View Comments...