This post is just a test post playing with embedding video with the HTML 5 video element. First, I’m going to try just dragging in a video, and see what WordPress gives me, then I’ll probably end up hand coding it.

This video was shot during my 2012 hot air balloon ride, with my iPhone. One problem I’ve had using iPhone video is that it often comes out upside down. It looks OK in Aperture, and in the QuickTime player, but when I go to transcode it into other formats, it comes out upside down. I discovered tonight the trick is to open it in QuickTime player, and export it.

OK, let’s see what drag and drop gives me… and the files are too big. Hold on while I FTP them up to the server…. OK, they’re up. Now let’s try writing some code….and I have a video:

Since the files are largish, I’ve set them not to pre-load. Use the play button (assuming you see one) to load and view the video.

The Code

This is what the HTML looks like. Note the alternative textual content inside the video element, including a download link.

<video width="700" height="394" controls="controls" preload="none">
<source src="/wp-content/uploads/2014/04/IMG_0245f.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="/wp-content/uploads/2014/04/IMG_0245f.webmhd.webm" type="video/webm; codecs=vp8,vorbis">
<source src="/wp-content/uploads/2014/04/IMG_0245f.oggtheora.ogv" type="video/ogg; codecs=theora,vorbis">
<span style="background:#e8e8e8; padding:.25em">There is a video element here that you're not seeing because your browser doesn't support it. The video was shot from a hot air balloon, looking at other balloons, then down at the trees the balloon is floating over. <a href="/wp-content/uploads/2014/04/IMG_0245f.mov">Use this link to download the video directly.</a></span>
</video>

(Original code from Dive into HTML 5)