Digital Anthill » Video

Physx – First Play

Rob — Thu, 04 Aug 2011 20:51:50 +0000

Went on search the other day to see if there was an alternative to 3Ds max’s physics system, Reactor. I soon came across Physx from Nvidia. Its currently still in public beta which means you can download it for free once you sign up to the nvida developer zone (You can also Google the links).

Once I installed it I soon realised that this was 10x better than Reactor. With out looking at and instructions I managed to work my way round the controls in no time (its that intuitive to use). After a bit of practice and looking at some of the example scenes they provide, I was soon creating some pretty interesting things.

The best thing about this program is the ability to play the simulation real time in the view port. This is something you could only dream of doing with Reactor. Because its so quick to view the simulation it means you can play around with different things and see the results almost straight away.

For my first experiment I’ve taken my new logo, divided it up in to small sections and dropped it through this pinball style course..

I have quite a few ideas I want to try out so keep tuned for more

Tribe Showreel

Rob — Fri, 22 Jul 2011 10:15:36 +0000

Tribe Brand Communication Showreel 2011 from Tribe Brand Communication on Vimeo.

So I’ve been a busy bee the past 3 months, working on the tribe showreel. It’s finally complete and released into the wild..

I’m putting together a how it was made post soon..

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.

Busc 11 – Round Up

Rob — Mon, 23 May 2011 18:00:17 +0000

So Its been while since my last post… I don’t know why but I seem to have very little spare time nowadays. I guess working a full time job really does take its toll on personal projects and keeping things updated. Any way at the beginning of April I went back out to the French Alps with some friends from Nottingham Trent Uni. Once again we had an awesome time. The snow wasn’t amazing with it being towards the end of the season, however the X-games were held there only a few weeks before so the parks were top level. We spent most the days shredding them up. I filmed quite a bit again.. standard, this time I didn’t edit all the footage to music etc so I just created a few little videos that consisted of the best bits, these went up on facebook.

I did get time to produce the following little edit. While on the slope I had the idea of the camera pole floating between people by getting someone to carry it from behind. We did a few trial runs and it actually ended up being quite difficult. The person being filmed had to remember not to get the person who handed the camera to them in shot. The person taking the camera around had to make sure their shadow wasn’t in the shot. We tried it a few times, The following edit has been chopped up a bit to make it go to the beat, also to cut out any bits where you could see the carrier.

Magic Floaty Cam from Rob Antill on Vimeo.

Hit MORE… for more.

Also I set a new personal best on my board… 61.6mph. It felt so quick. The board behaves quite differently at that kind of speed…

I took this stereographic pic of Olli for a competition. Unfortunately I missed the deadline for the hand in.. Oh well.

This was my second and successful attempt at hitting one of the larger kickers. I had been looking at this all week and thought I might as well go for it on the last day. I hit it with some speed and ended up clearing quite a bit of the landing. I cannot describe the feeling you get as you’re launch off the end of the ramp into oblivion!!

If you want to see more pics head to my flickr and scroll through

SnowSport DVD Production/Premiere

Rob — Wed, 23 Mar 2011 00:00:56 +0000

So after three months of hard work the time arrived to finally show everybody what we had been doing. Me and Alex had one final push to get the DVD completed before Trent students broke up for Easter holidays. It was quite a stressful time as there was still a bit to get sorted. Alex was working on getting all the artwork ready to print and I was working on setting up the menu system for the DVD. We finished it all by the Sunday evening and had the master copy of the disc sent via next day recorded delivery (Royal Mail Style) on Monday.

The discs were produced by vponline, a small company up in Scotland. The turn around was very quick. He managed to get all 100 discs sent back down to us by Friday morning. I highly recommend using them if you need any discs duplicating.

Below are a few shots of the DVD artwork. We got dual sided cover prints and clear cases so when you open it there are a couple of pictures on the inside. The DVDs were thermal printed which means they are water resistant and better quality.

Click MORE below: To see the rest of this post..

We had arranged for the screening to be the following Monday at a bar in town called RIDE. The only way we could get all 100 discs up there was with Alex’s huge rucksack.

We laid out the discs on the table football, ready for people to come and collect them. We connected the projector to my laptop and got the sound up and running.

And then it was go time. It was quite intense, there was about 60 people there and I had no idea what their reactions would be… But it all seemed to go down very well. It was odd because I had to remind my self that they hadn’t seen any of this footage before, where as me and Alex had watched it about a million times. I wish that I could have recorded everyone as they watched it to see which bits were more engaging etc. This would’ve helped me the next time I made a video like this…

Over all this has been one epic project! Its easily the most work I’ve put into any one thing. I’m super pleased with the final result, Its been great working closely with a graphic designer, his input has been invaluable.

The only question is do I do this again next year.. who knows, the thought of doing it all again makes me feel a little sick right now but maybe things will change…