HTML5 Video Preparation [OBSOLETE]

Software tutorials of interest.
Post Reply
Message
Author
jstenner
Site Admin
Posts: 63
Joined: Wed Jan 27, 2010 7:33 pm

HTML5 Video Preparation [OBSOLETE]

#1 Post by jstenner »

The goal is to create a video file that can be uploaded to a web server and efficiently streamed to viewers across various connection speeds and hardware/device profiles via the Internet. HTML5 is the latest standard in the development of hypertext markup language and introduces the <video> tag. My wiki now supports the video tag via an open-source player (Kaltura) that will stream videos to all modern browsers and mobile devices. If you upload a single file of type mp4, ogv, or webm, the server will automatically encode multiple versions of the file to make this happen. The goal of this tutorial is to show you how to prepare your videos in the easiest fashion. The workflow is NOT specific to our wiki. HTML5 video preparation is generally recommended for network streaming these days.

As a workflow, I would recommend rendering your video/animation from Final Cut X. Your project should be configured as full DCI 4K. That's 4096 x 2160 pixels, 23.98 (24) fps, remember? If it's not, select your project and then, click the Modify button to change it.
Final Cut ProScreenSnapz008.jpg
Final Cut ProScreenSnapz009.jpg
Finally, output your video by selecting Share->Master File.. (there's also a little share icon to the bottom right of the viewer)
Final Cut ProScreenSnapz001.jpg
Final Cut ProScreenSnapz001.jpg (34.81 KiB) Viewed 2664 times
In the Share dialog set the codec to ProRes 422. Others, like ProRes 444 and HQ are available, but for our purposes, regular ProRes is fine. If your movie has no audio, select Video Only.
Final Cut ProScreenSnapz002.jpg
This will produce an archival version of your movie. NOTE: this will NOT produce the file you'll upload anywhere! It is waaay too big. The ProRes file is a lossless compressed working version of your file which you will subsequently use to created web-streamable (and other) versions of your movie. Think of this like a .tif or .psd version of your file as opposed to a .jpg version. You may want to burn this file to a data DVD or save it to a disc as an archive. Next, we'll open Handbrake (free and installed on the lab computers) and use it to produce a much smaller (compressed) and streaming-capable mp4 video file.
HandBrakeScreenSnapz001.jpg
Be sure to check "Web optimized", Format= MP4 file, and Video Codec = H.264 (x264) -- update: as of 2017, choose H.265 (x265). I have had good results transcoding from ProRes to mp4 with Video Quality set at Constant Quality RF: 18, though, depending on your source footage, you may need to experiment. Check to be sure that your Picture Settings: Source and Output resolutions match and are producing 4096 x 2160 pixel output. If not, select the Picture Settings button, change the Anamorphic setting to None, uncheck preserve aspect, and set the pixels to exactly 4096 x 2160. Here's a short overview of various considerations for compression: What Bitrate?
HandBrakeScreenSnapz002.jpg
When you're done configuring the settings, click Start and let it encode. Once it finishes, you'll have a movie that is ready to upload to the server. Navigate to the wiki and click the "Upload file" link towards the bottom of the menu on the left. Select your movie via the web interface and let the server do its job. It may take it a while to create the alternate versions of the movie, so don't panic if initially, when you embed the movie, you can't see all the sub-versions. You can monitor the creation of the alternate versions via the wiki by looking at the File:<myfilename.mp4> page if you're interested.

Embed the movie using the same syntax used to embed images and other data on the wiki. Follow the detailed embed instructions on Video Format Instructions. When you're done, you should get something like this:
Google ChromeScreenSnapz034.jpg
Congratulations!
The master of disaster!

Post Reply