Page History

Turn Off History

Most video hosting sites have terms of service or usage that are problematic for us. For example there isn't a legal way to have a single "CHTC" YouTube account shared by multiple staff short of making a special arrangement with Google.

The good news is that there is no reason we can't just host the video ourselves!

The following is a general strategy; as of May 2014 it has not been tested.

Downloads

Put the files up for download! There is no reason to not just offer for download the exact same files created for streaming (below).

One solution: 

  1. cd where-ever-your-web-page-is
  2. mkdir download
  3. cd download
  4. ls ../*.mp4 ../*.webm | xargs -n1 --replace ln -s '{}' ./
  5. cat > .htaccess <<END
AddType application/octet-stream .mp4
AddType application/octet-stream .webm

<Files "*">
	Header set Content-Disposition attachment
</Files>
END

The .htaccess file ensures the files are served without a useful MIME type, discouraging browsers from trying to use them, and adds "Content-Disposition: attachment", which tells browsers to default to offering to save the file.

Having the .htaccess file do this requires that the main Apache configuration allow it. As of October 2014, the CSL's web server does.2

Streaming

Creating the video files

Dive Into HTML5 has a good overview of what you need to do. The situation is even better if you're willing to require a "recent" web browser (2011+), in which case you can ignore Flash and Theora+Vorbis+Ogg and exclusively rely on H.264(baseline)+AAC(low complexity)+MP4 and WebM.

Dive Into HTML5's recommendations for creating the files should work, but are probably overkill. If you've got a good ffmpeg install (Try /u/a/d/adesmet/bin/opt/ffmpeg/bin/ffmpeg ) it can do the job. The full details are a bit long, but here is a summary: 

ffmpeg -i input.mp4 -c:v libvpx -qmax 42 -qmin 10 -b:v 1M -c:a libvorbis -q:a 4 -f webm out.webm
ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline  -movflags faststart -crf 23 -c:a libfdk_aac out.mp4

Warning: iPhones (as of 3S) can apparently only accept video up to 640x480. (Maybe? Double check.) If this is true, we may want to also export low-resolution versions and have a link to a different place to view the videos for lower end devices.

(Instead of libfdk_aac, you can use libfaac. The original source did so. It appears that libfdk_aac is a superior replacement.)

Note that the above adds "-movflags faststart" to the mp4 creation. This causes a second pass on the file (slow, sadly) that moves the metadata to the start of the file, making it faster for a web browser to seek into the middle of the file. Instead of "-movflags faststart" you can use the tool qt-faststart.

By default ffmpeg seems to use a number of threads equal to the number of cores you have minus 1. You can speed things up by specifying your actual number of cores. For example "-threads 2" forces 2 threads.

Extracting a poster

Ideally you want a poster image for the browser to display before the video is loaded. Here is a quick and dirty way to exact the first frame. Instead of "0" for "-ss", you can specify a number of seconds into the video to sample. You can also specify HH:MM:SS.mm. 

ffmpeg -i input.mp4 -ss 0 -vframes 1 input.jpg

Creating the HTML

Here is a very simple example of what the HTML might look like: 

<html>
<head>
<title>Tutorial: An Introduction to Using HTCondor</title>
</head>
<body>


Tutorial: An Introduction to Using HTCondor



Presented by Karen Miller, summer of 2014.
Download slides.
Download video as MP4.
Download video as WebM.


<video width="640" height="360" controls poster="Intro_To_Using_HTCondor.jpg">
	<source src="Intro_To_Using_HTCondor.mp4 type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
	<source src="Intro_To_Using_HTCondor.webm" type="video/webm; codecs=vp8,vorbis">
Sorry, your web browser does not appear to support HTML5 video.
</video>

</body>
</html>

Editing with ffmpeg

This is probably unnecessary if you have a full blown video editor, but occasionally quick command line tools are useful.

Lossless Trimming

You can use ffmpeg to do lossless trimming of files (say, to break a single video into multiple videos, or to trim off dead time). source 

# START and LENGTH are seconds or hh:mm:ss.
ffmpeg -acodec copy -vcodec copy -ss START -t LENGTH -i ORIGINALFILE.mp4 OUTFILE.mp4

Cropping

You can also crop the video with ffmpeg, which may be useful if part of the video feel is always empty (say, the video is wide enough to handle a 16:9 slide, but only 4:3 slides are shown. This is lossy, so you'll probably want to merge it into the conversion step. source 

ffmpeg -i ORIGINALFILE.mp4 -filter:v "crop=out_w:out_h:x:y" OUTFILE.mp4

Branding / Logos

You might want some logos: