tl;dr

Convert videos to mp4 (H.264, AAC encodings) and webm (VP9, OPUS encodings) and make a poster image

cd themes/layouts/static/videos
../../../../scripts/convert_videos.sh /path/to/my/video_file_basename.mov
ffmpeg -ss 00:00:01 -i /path/to/my/video_file_basename.mov -frames:v 1 poster/vide_file_basename.png

then use this shortcode in your markdown:

{{<embed-video alt="My caption" src="video_file_basename">}}

Partial and shortcode

Two partials and shortcodes have been made to easily use Video.js for displaying screen captures or general video embedding.

When you use one of the shortcodes embed-video or screen-capture, the page should automatically pull in the minimised Javascript and CSS required (this is performed in head-meta.html which, when appropriate, calls the partial video-js-init.html which in turn includes the required JS and CSS files).

First of all, it’s important that embedded videos are encoded in an accessible way. Multiple encodings can be referenced in order to maximise coverage of different devices and platforms. There is a script scripts/convert_videos.sh that will convert a video recording into sensibly encoded (and sized) video files. It makes two versions encoded as MP4 (with H.264 video encoding and AAC audio encoding), and a WEBM (VP9 video encoding and OPUS audio encoding). Have a look at the script, you can change the value of REMOVE_AUDIO=0 to 1 if you want to strip any audio track (for e.g. screen captures). There’s also a couple of ffmpeg recipes in the comments of this script to get a single frame for a “poster” image, and how to set the title in a video file.

If you cd themes/jalview/static/videos then you can run the script from there, with your video file(s) as argument(s), to create the correct video files in the mp4 and webm directories that the shortcodes look in.

Once you have these two files, put them in themes/jalview/static/videos/mp4 and themes/jalview/static/videos/webm if you haven’t already, with the same base for the filename and .mp4 and .webm extensions.

You should also create a “poster” PNG image (a possibly edited still image from the video for when the video is not playing) and put that in themes/jalview/static/videos/poster with the same basename and extension .png. You may have to create poster images manually. This is because you may have to choose a timeframe and change the ffmpeg command (the -ss 00:00:01 part, this is hours:minutes:seconds of the timeframe) for each video. You could make a completely different poster image – ideally it should be the same pixel size as the video.

You can now use the screen-capture shortcode to embed your video in a page. You need to supply a src attribute with the basename of the video, and optionally you can provide an alt attribute to add a caption to the video.

Examples

{{<screen-capture alt="Console mode install on Windows" src="windows-cli-console-install-640">}}

yields

The screen-capture shortcode is designed for a non-audio screen-capture video so doesn’t include volume or resizing controls.

There is a rudimentarily styled embed-video shortcode for more general video content (note this has a volume control but the example video here has no audio track):

{{<embed-video alt="Console mode install on Windows" src="windows-cli-console-install-640">}}