strip out any css/js not need so i copy paste it over without mistake, looks like color picker stuff is in there, some class called polina, etc
try to wrap it in a container div, then try to float some content on top of it like we will have in our realtree project, just center some copy or something, just make sure doesnt cause issues
also, is that looping? looks like a really long clip
last thing, what formats do we need, and is it easy to save them out with the tools we have?
looks like the 'poster' var is just a placeholder image for preload
need to see if we can turn it off somehow for mobile size, so they dont have to load big video on a phone at 320px
Taylor Bernard on July 14, 2015:
ok cleaned it up
looks like for mobile it defaults not wanting to play (via browser, not code) bg video due to bandwidth throttling. but they also have a snippet available to put in so it doesnt play unless 100% screen width is like 800px or bigger.
Justin Bernard on July 14, 2015:
cool make note to def add that snippet in that sets a min res
Taylor Bernard on July 15, 2015:
just saw that they are shooting the video in 4k res. i'll have to brush up on how to export decent quality to small file size, never been good at that. ex- no idea how they get tv shows i dl off torrent that are 1hr to be 720p and less than 400mb. the video i just put up for the test was with compression, and was 6mb for like 240p for like 45sec.
we may do some stylistic to it, greyscale, etc, see what we can come up with later
Justin Bernard on July 22, 2015:
here is vid to use for fullscreen bg test
lets just go fullscreen, with logo on top of it centered
going to see if we need to greyscale it/add blk tint/etc for contrast
Taylor Bernard on July 22, 2015:
what do you think about this. saw this one someone elses jquery bg video write up:
For best results, I recommend using Vimeo. Sign up for Vimeo Pro,
then use their direct mp4 link to serve the video. Vimeo not only has
solid bandwidth for delivering video, they do great compression. If you
start with a high def source at a bitrate of 10mbps or more, it does
such a nice job that you can probably get away with using the standard
def source as your background video. Refer to the Vimeo Compression Guidelines for best practices in preparing video files.
Taylor Bernard on July 22, 2015:
put that new video test up on server at /penrose
from 500mb down to 18mb. but still trying to figure out how to get it smaller. anything less size is going to be either less quality or less dimensional size.
Justin Bernard on July 22, 2015:
never thought about serving via vimeo
lets use it as is for now, but make a mental note of that, and later on we can optimize when site is further along and see if its worth serving via vimeo
dont worry about compressing/resizing for now, looks good, move on to the design layout notes on the other design items i posted for you
Justin Bernard on July 22, 2015:
kill that blk box with opacity on the logo, just do logo, want to see if we can get away with white logo alone with enough contrast
well. i have the resize working fine and i found an awesome device detect script (not put in yet).
only issue is that i have it turning the video off when it gets a certain size, but its not overwriting the background image and replacing it. just making a black bg. image path is fine as well.
thats fine. post up code to server, ill look later, you can move on to contact form (no design just functional that matches their fields) and then site skeleton
Taylor Bernard on July 23, 2015:
k. updated /penrose on server with new files.
here is the cool mobile detection i found.
the one we have in place is 'supposed' to work but this one is way more elaborate. called WURFL and you use it with monderinzr to detect touch and mobile devices.
Comments
Taylor Bernard on July 14, 2015:
Justin Bernard on July 14, 2015:
just mock it up in a boilerplate install so that it will just be copy paste into our actual realtree proejct
thx
Taylor Bernard on July 14, 2015:
http://client.fleeangrybear.com/realtree/sego/index.html
Justin Bernard on July 14, 2015:
strip out any css/js not need so i copy paste it over without mistake, looks like color picker stuff is in there, some class called polina, etc
try to wrap it in a container div, then try to float some content on top of it like we will have in our realtree project, just center some copy or something, just make sure doesnt cause issues
also, is that looping? looks like a really long clip
last thing, what formats do we need, and is it easy to save them out with the tools we have?
looks like the 'poster' var is just a placeholder image for preload
need to see if we can turn it off somehow for mobile size, so they dont have to load big video on a phone at 320px
Taylor Bernard on July 14, 2015:
looks like for mobile it defaults not wanting to play (via browser, not code) bg video due to bandwidth throttling. but they also have a snippet available to put in so it doesnt play unless 100% screen width is like 800px or bigger.
Justin Bernard on July 14, 2015:
make note to def add that snippet in that sets a min res
Taylor Bernard on July 15, 2015:
i'll have to brush up on how to export decent quality to small file size, never been good at that. ex- no idea how they get tv shows i dl off torrent that are 1hr to be 720p and less than 400mb. the video i just put up for the test was with compression, and was 6mb for like 240p for like 45sec.
Justin Bernard on July 21, 2015:
http://cloud.fleeangrybear.com/0i3p0m0p3x1M
we may do some stylistic to it, greyscale, etc, see what we can come up with later
Justin Bernard on July 22, 2015:
lets just go fullscreen, with logo on top of it centered
going to see if we need to greyscale it/add blk tint/etc for contrast
Taylor Bernard on July 22, 2015:
For best results, I recommend using Vimeo. Sign up for Vimeo Pro, then use their direct mp4 link to serve the video. Vimeo not only has solid bandwidth for delivering video, they do great compression. If you start with a high def source at a bitrate of 10mbps or more, it does such a nice job that you can probably get away with using the standard def source as your background video. Refer to the Vimeo Compression Guidelines for best practices in preparing video files.
Taylor Bernard on July 22, 2015:
from 500mb down to 18mb. but still trying to figure out how to get it smaller. anything less size is going to be either less quality or less dimensional size.
Justin Bernard on July 22, 2015:
lets use it as is for now, but make a mental note of that, and later on we can optimize when site is further along and see if its worth serving via vimeo
dont worry about compressing/resizing for now, looks good, move on to the design layout notes on the other design items i posted for you
Justin Bernard on July 22, 2015:
kill that blk box with opacity on the logo, just do logo, want to see if we can get away with white logo alone with enough contrast
http://client.fleeangrybear.com/realtree/penrose/
Taylor Bernard on July 22, 2015:
Taylor Bernard on July 23, 2015:
only issue is that i have it turning the video off when it gets a certain size, but its not overwriting the background image and replacing it. just making a black bg. image path is fine as well.
Justin Bernard on July 23, 2015:
Taylor Bernard on July 23, 2015:
here is the cool mobile detection i found.
the one we have in place is 'supposed' to work but this one is way more elaborate.
called WURFL and you use it with monderinzr to detect touch and mobile devices.
http://blog.greggant.com/post/96553681958/wurfl-modernizer-for-html5-background-video