Browser testing

Bottom video - space on the left and right 

Bottom video - space on the left and right  

Background is reversed- fonts not displayed - sliders don't slide

Fixes: opera and firefox-video needs to be changed slightly and made wider so that there is no gap
Ie background need to be reversed back and fonts needed to be added: I am thinking of correcting this by adding a new css just for internet explorer: with this i can reverse the background and change the font without affecting any other browsers, also the page does not slide I can also change the time in which the content takes to hide.

Optimising video

For my roll over videos to work they must be loaded up when the page loads, this means that i must keep them as small as possible to reduce loading times. Using a video encoder i can set the bitrate of the video to a specific amount which means that for the video only needs a certain amount internet speed to load. My smaller videos will be set between 400-700 kbps, this way they will have good quality and still load fast.

Video problem solved

From:

 To:

"The problem is line #2, you check if the target element is that with the ID "video1".

it would suffice to register the event listeners on the
http://www.dreamincode.net/forums/topic/281583-video-plays-on-mouse-over-but-not-with-multiple-videos/

The original problem was that i could "getelementbyId" to two ids, it would only work with one, however using this code above it works flawlessly with any amount of videos.

Video problem rollovers

As I want my video to play on rollover I have obtained some jquery to make this possible, however i can only make one of the videos work out off two.

Tutorial I used:
http://developer.practicalecommerce.com/articles/1878-Hover-to-Play-Ecommerce-Videos-with-HTML5-CSS-and-JavaScript

Rough mockup of background image sliders

These are the backgrounds that I will be using for my site.

Shadowbox js

I really like the shadowbox js for displaying video and images, i can also have it cycle through each of the images/videos.

My work

as i have a mixture of different sized media pieces as well as images and video, trying to lay these out together will be quite difficult and will also impact the design, i have decided to combat this by just showing a section of each piece in a 16:9 ratio as it it easier to resize/crop/fit images than video.

This way i can fit any sized piece of media into the website without it looking messy, also focusing on a specific part can make the design look more interesting.

I really like the polaroid style effect that this site has used to display video/images, it works well with the caption underneath to further explain the piece.

Another representation of my design idea, I will have the site divided up into three sections and each section will flip to show a certain page when the navigation is clicked.