Digital Anthill » Tutorial

HTML5 Video Embed Tutorial

Rob — Tue, 24 May 2011 21:41:02 +0000

You’ve probably heard about HTML5 and the ability to embed video. Well this sounds all well and good but its been a bit of a mission getting my head around it and finally getting to a point where it actually works. I first started looking into it about 2 months ago when creating videos for the new Tribe website. Me and Ben (the web developer there) spent quite a bit of time scratching our heads and testing different methods until we came up with a solution that should work across all platforms.

In this tutorial I’ll try my best to explain the process of getting HTML5 video to embed into a WordPress Blog, you’re not limited to a WP blog, you should be able to adapt it for any type of site. Bear in mind I don’t have a great deal of knowledge in the web area, so I apologise now if this is a little sloppy.

Remember only HTML5 supported browsers can view the video, this currently includes the latest versions of Chrome, IE9, Firefox4, Safari, Opera and most mobile devices such as the iPhone, iPad etc.

Okay there’s a few things you’ll need to get for this to work:

Access to your own hosting, via FTP. I will be using Filezilla

A video you want to host. (Here’s a link to the original source file used in the above clip)

A file converter. I will be using xmedia Recode because its free and is the best WebM converter I’ve come across.

A text editor

Flowplayer

Step 1 – Converting The Video

To get the video to play across multiple platforms you need to convert your original file in to two formats, the new and open source WebM which is supported by Chrome, Firefox4 and Opera also a H.264 MP4 file that’s supported by safari, IE9, mobile devices and will be used by Flowplayer if the browser does not support HTML5 (IE8 and below for example)

Download and install xmedia-recode. (Unfortunately this is only available for windows, I haven’t looked into mac alternatives)

Open it up and you should see this screen:

Drag your original file to where the highlighted area is in the above screen shot or click ‘Open File’.

Select the imported video file by clicking it.

Where it says format select ‘WebM’

At the bottom choose your destination for the converted video. I’ve chosen the desktop.

Now click the ‘Filters/Preview’ tab and change the resolution.

All the content on my blog is 555 pixels wide, for some reason you cannot enter this figure into the program, so I leave it at the nearest available option: ‘552×312’

Now click the ‘Add Job’ button at the top of the window. If you go to the ‘Jobs’ tab you can see that its been added to the list.

The great thing about this program is its ability to batch process easily, So if you have a few files that need converting you can just keep importing them and adding them to the list.

So now that you have the WebM ready to encode go back to the ‘Format’ tab.

This time choose ‘MP4’ from the ‘Format’ roll down.

Choose ‘MPEG-4 AVC /H.264’ from the ‘Codec’ roll down.

Now select the ‘Video’ tab and make sure the settings are the same as mine below:

Its important that these are correct, I have found if they are left as default then the video wont play on iPhones.

Again make sure that you change the video resolu
tion in the ‘Filters/Preview’ tab.. if you need to that is. Also worth noting that you should make sure the ‘Keep aspect ratio’ check box is selected when changing the size.

Now click the ‘Add Job’ button again.

If you click the ‘Jobs’ tab you’ll see two files listed and ready to encode.. only one thing left to do…..

Click ‘Encode’ at the top. A pop up will appear with the encoding progress.

Step 2 – Setting up your site

I came across a problem when testing the video out in different browsers. Firefox4 could not display it for some reason. After some time and frustration I finally worked out it must be something to do with the settings on my server and not a codec issue. Ben showed me that the ‘.htaccess’ folder hosted on my server needed updating so the WebM format could be recognised by some browsers. I have to be honest I’m not entirely sure why or how but this solution works..

So login to your site via your FTP and locate your ‘.htaccess’ file and open it with a text editor.

Add the following lines to the top of the document:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Note that the .ogv file is probably unnecessary now that firefox4 supports WebM.

Save the file and upload it back to your server.

Now your site is ready to play the video content.

Step 3 – Uploading the video

Now that the site is ready you need to upload your video.

Load up your FTP client and create a new directory, name it video. For organisational sake you could create sub directories for every set of videos you upload.

Copy the files you converted in xmedia to the newly created folder.

Step 4 – Embedding the video.

So now you’re finally ready to embed the video!

If you want purely HTML5 video playing on your site then the code below will do just that. If you want to support more browsers by including a fall-back flash player, read the rest of section then follow the instructions in step 5.

552" height="312" preload controls autoplay="autoplay">

http://www.digitalanthill.com/video/randomblog/powder.mp4" type=’video/mp4; codecs="avc1.42E01E, mp4a.40.2"’ />

http://www.digitalanthill.com/video/randomblog/powder.webm" type=’video/webm; codecs="vp8, vorbis"’ />

Key:

preload = remove this if you don’t want the video to play as you load the page

controls = remove this if you want to build you own controller

autoplay=”autoplay” = remove this if you don’t want the video to autoplay

Bold URLs = you need to replace these with links to the video you just uploaded

The above code is the most efficient way (I’ve found) of getting a video to embed into your site. As long as you replace the bold areas with you own requirements it should work.

You can (and probably should) take it one step further by adding flash support in there too. This will allow browsers that don’t support HTML5 to resort back to a native flash player.

The following instructions will show you how to do just that.

Step 5 – Enable Flash

Download Flowplayer (free) and copy the ‘flowplayer’ folder to the ‘public_html’ folder on your server.

Next you need to add the following to your header:

In this example I’ve added it just above the tag. Remember to replace the url with a link to flowplayer-3.2.6.min.js on your own site.

The grey highlighted code below is the same as the above HTML5 embed. The orange highlighted area is what you need to add to the grey code to get the flash flowplayer working.

http://www.digitalanthill.com/flowplayer/flowplayer-3.2.7.swf">

http://www.digitalanthill.com/video/randomblog/powder.mp4", "autoPlay" : true, "autoBuffering" : true } }’ />

Again remember to change the bold text with links to your own content hosted on your site. If you use the links I’ve provided it will probably work but if I were to change the locations of the files your embeds will break.

Well I hope this tutorial is some help to someone. If you spot anything wrong with this post, come across any problems or you just want to say hello, leave a comment below.

Good luck

p.s. If you want to learn more about the above process check out this site: http://diveintohtml5.org/video.html

The clip used was taken from this video.

Fractals In After Effects – Tutorial

Rob — Wed, 10 Nov 2010 12:01:18 +0000

I found that you can generate a fractal in After Effects the other day.. I couldn’t resist having a little play. Here’s what I created… Be warned the video is ever so lightly trippy :p

Fractalorama from Rob Antill on Vimeo.

Click the More link below for a quick tutorial on how to do this.

Load up After Effects.

Create a New Composition. You can use these settings..

Anywhere in the comp window Right Click > New > Soild… > Click Ok

Right Click the newly generated Layer then Effect > Generate > Fractal

You should see something like the image below.

Go into the settings tab on the left.

By clicking the equation roll out you can generate different patterns.

If you want to animate the zoom effect like my video check the stopwatch on the left next to the magnification slider.

Now in the time line move the slider to 20 seconds for example and increase the zoom amount. As you zoom in change the position of the x(reel) and Y(Imaginary) making sure your always zooming in on one spot. and not just blackness. Watch out though the further you zoom in the smaller the amount you need to enter in the x and Y values. It takes a bit of playing around to get it working correctly!

Once you’ve set it up and happy with the way it looks Click Composition at the top then Make Movie. Use the settings below.

Job Done..

If you want any further help just post a comment below..

Pixel Motion – Stop Motion Technique

Rob — Tue, 16 Feb 2010 17:54:06 +0000

I came across the following video the other week and was amazed by the effect mustardcuffins had created. I spent a long time trying to think how it was done.

Drift from mustardcuffins on Vimeo.

I was producing some work for a project when I came across the pixel motion frame blending option in After Effects. I realized that this is what gave this stop motion that awesome smooth blending transition effect.

The next day I went out and took some photos to see if I could recreate that effect.

All these shots were taken with the Nikon D90 and the 18-107mm kit lens.

First test. Not quite as smooth mustards but its nearly there.

More examples and a tutorial after the break.

I found that the subject you focus on needs to be quite big other wise it can look a bit odd for example the lamp post in the following clip.

I thought I would also see what happens if the camera doesn’t move. It gives quite a nice effect on the train carriages.

I realized nearly all of mustardcuffins shots had a central focal point. In the tower block example above that point is the corner of the building. I took a photo every three steps or so making sure that the centre of the image was lined up with that point on the tower.

Here’s how I then created the effect using After Effects I’m not sure if this is how he does it but it does produce similar results:

File>Import>File – select the first image of the sequence

Make sure Jpeg sequence is selected then click Open.

Right click in the project tab and select New Composition.

Give the new Composition a name. I’ve set it up as 720p with 24fps, of course you can change this to what you want. Click ok

Drag your image sequence into the timeline. Depending on the resolution of your camera you may need to scale the image down a bit.

I found that if the image sequence is played how it is at the moment there is some movement between frames. To fix this I used the stabilize motion feature.

Click Stabilize Motion (if this window isn’t there go to Window>Tracker). This will bring up a track point on your video. Zoom right in to the centre point of the video and drag the centre of the tracker to that point. Then click the Analyze 1 Frame Forward button if the tracker doesn’t stick to the same point move it manually to the correct position. I found that the automatic tracking doesn’t really work all that well with stop motion video the quickest way I could do it was to press the page down button and then move the tracker manually into position.

Once you have tracked the entire sequence click the apply button. If you play the video now you’ll notice that it has smoothed out the movement.

Now select the motion blend tool. click the box twice until it is a solid diagonal line appears. This is the pixel blending option (what gives it that warping effect) I think this is only available in the later versions of AE.

If you play the video now it will be far to fast. So right click the video in the time line and select Time>Time Stretch. The time you set the new duration depends on how many frames the current clip is. For this example the original clip was about 2 seconds and I increased it to 20 (just experiment with the times).

You can preview the video by clicking the Ram preview button. It might be an idea to turn the quality down while doing this because it can take a long time to create a preview.

Once you are happy with the results render out the movie
. Composition>Make Movie then select the compression settings you want then hit Render. That’s it.

I will be creating some more of my own videos based on this technique soon.

If you have any questions just post a comment ill try and answer it if i can..