Creating and Using WebM Videos for Online Mathematics Courses

Table of Contents

1 Information

1.1 Contact Information

1.2 Web Site Information

2 Introduction

2.1 The WebM container format

2.2 Why use the WebM format for videos?

  • WebM videos may be played in browsers that support the HTML5 <video> tag and the WebM format.
  • Firefox, Google Chrome, and Opera all support the WebM format.
  • It is easy to post WebM videos on any website using the <video> tag.
    • There is no need to use a special service like YouTube in order to post a WebM video.
  • It is easy for a viewer to download a WebM video.
  • Adobe Flash and special plugins are not required by viewers of a WebM video.
  • The WebM format is open and royalty-free.

2.3 Software

  • FFmpeg may be used to do the following:
    • capture a desktop video stream and encode it using the H.264/MPEG-4 AVC codec,
    • capture an audio stream and encode it using the Vorbis codec,
    • re-encode a video stream using the VP8 codec, and
    • bundle a VP8 encoded video stream and a Vorbis encoded audio stream into a WebM container.
  • FFmpeg is a versatile program that contains a huge number of features for recording, converting, and streaming audio and video.
  • Xournal journaling software may be used to write the notes that appear in a video.
  • There are numerous other programs that may be used in a video. For instance, Sage may be used for demonstrations.
  • The program mkvmerge may be used to edit a video.

3 FFmpeg and MKVToolNix

3.1 Compile FFmpeg

  • Follow the instructions given at https://trac.ffmpeg.org/wiki/UbuntuCompilationGuide.
  • Install autoconf, automake, build-essential, libtool, libx11-dev, libxext-dev, libxfixes-dev, pkg-config, texi2html, and zlib1g-dev if they aren't already installed.
    • These packages are necessary in order to build FFmpeg.
  • Install audio and video dependencies.
    • The audio and video dependencies are libass-dev, libgpac-dev, libsdl1.2-dev, libtheora-dev, libva-dev, libvdpau-dev, and libvorbis-dev.
    • Some of these packages may not be necessary for some setups.
    • The library libvorbis-dev contains the Vorbis audio codec that must be used to encode audio streams for WebM videos.
  • Install Yasm and libx264
  • Install libvpx.
    • Video streams of WebM videos must be encoded by the VP8 codec. The libvpx library contains that codec.
  • Install FFmpeg.
    • Make sure to enable libvorbis, libx264, libvpx, gpl, nonfree, and x11grab.
    • Enabling the x11grab option permits grabbing of the x11 desktop.
  • Guides for other operating systems are given at https://trac.ffmpeg.org/wiki/CompilationGuide.

3.2 Install MKVToolNix editing tools

4 Make an MKV video

4.1 The MKV container format

  • The first step is to capture a high quality video stream and a high quality audio stream.
    • Capturing and converting the video stream using the VP8 codec takes time and a lot of processing power. The first step will encode the video stream using the H.264/MPEG-4 AVC codec and the audio stream using the Vorbis codec, and the second step will re-encode the video stream using the VP8 codec and put both streams into a WebM container. The audio stream does not need to be re-encoded since WebM audio streams are encoded by the Vorbis codec.
  • The captured video and audio streams are bundled together in an MKV file.

4.2 The video capture command

  • ffmpeg -f x11grab -s 1366x768 -r 24 -i :0.0 -f alsa -i pulse -acodec libvorbis -vcodec libx264 -g 24 out.mkv

4.3 Video stream

  • -f x11grab -s 1366x768 -r 24 -i :0.0
    • This portion sets up the video input.
    • -f is "force input file format."
      • x11grab: Grab the X11 display with ffmpeg.
    • -s is "set frame size"
      • Change the frame size to the size of the screen. My screen size is 1366x768.
    • -r is "set frame rate" in frames per second.
      • The standard frame rate is 24 frames per second. Lower frame rates make smaller videos of lesser quality.
    • -i is "input file."
      • 0.0 is display.screen number of the X11 server, it is the same as the DISPLAY environment variable.
      • The X11 display will be used as the video input stream.
      • Check the value of the DISPLAY variable: echo $DISPLAY

4.4 Audio stream

  • -f alsa -i pulse
    • This portion sets up the audio input
    • -f alsa
      • Forces ffmpeg to use ALSA (the Advanced Linux Sound Architecture) for the audio source.
    • -i pulse
      • Use the output from the PulseAudio sound server as the audio input stream.

4.5 Audio encoding

  • -acodec libvorbis
    • Set the audio codec to use to encode the audio input.
    • The audio of a WebM file is encoded with the Vorbis audio codec (ogg format).

4.6 Video encoding

  • -vcodec libx264
    • Set the video codec used to encode the video input.
    • The video stream is encoded using the Advanced Video Codec (AVC) otherwise known as H.264/MPEG-4 AVC.

4.7 Keyframes

  • -g 24
    • Sets the keyframe interval at the standard rate of 24 frames per second.
    • A keyframe is a frame of a video that contains all of the data necessary for that frame. Frames that are not keyframes borrow data from the nearest keyframe when the frame is displayed.
    • Low keyframe rates make smaller video files but also degrade the quality of the video and make searching the video more difficult.

5 Editing

5.1 Edit the MKV video

6 Conversion

6.1 Convert the MKV video to WebM

  • The second step is to encode the captured audio and video streams using the VP8 and Vorbis codecs and then put them into a WebM container. Actually, the audio stream was encoded using the Vorbis codec when it was captured.
  • We will use a 2-pass encoding process.
  • In pass 1, the statistics of the video are written to a log file.
    • The audio may be deactivated during pass 1.
    • The -an option disables audio recording
    • The libvpx library contains the VP8 codec used to encode the video stream.
  • In pass 2, the log file is used to generate the video at the requested bitrate.
  • Video bitrate

6.2 The conversion process

  1. cd to the proper folder.
  2. Pass 1: ffmpeg -i input.mkv -an -vcodec libvpx -b:v 1000k -pass 1 output.webm
  3. Pass 2: ffmpeg -i input.mkv -vcodec libvpx -b:v 1000k -pass 2 output.webm

7 Posting

7.1 Posting the WebM video

  • The following HTML code may be used to embed a video on a webpage. 
    <video
  id="lesson-video-tag"
  src="video.webm"
  controls 
  preload="metadata">
  Your browser does not support the <code>video</code> tag.
</video>
  • The controls option shows the playback and other controls.
  • Most up-to-date browsers support the <video> tag.
  • Firefox, Google Chrome, and Opera support the WebM format.
  • Sample WebM video post

Author: Scott P. Randby

Email: srandby@uakron.edu

Date: 2014-10-18 Sat 14:58

Made with GNU Emacs 24.2.1 and Org 8.2.4