javascript - Full width video background: A non-HTML5, purely jQuery solution...maybe -

long time stack overflow creeper. community has come incredibly elegant solutions rather perplexing questions.

i'm more of css3 or php kinda guy when comes handling dynamically displayed content. ideally solid knowledge base of jquery and/or javascript able answer 1 best. here idea, along thought process behind it:

create full screen (width:100%; height:auto; background:cover;) video background. instead of going using html5's video tag, flash fallback, iframe, or .gif, create series of images, animation render output of cinema4d, if put in sequential order create seamless pseudo-video experience.

in before "that's .gif, you're idiot" guy.

i believe jquery/javascript solve this. or not possible write script recognizes (or adds) div class of image, sets image display .0334ms (29.7 frame rate) sets image in z space while @ same time firing in next image within sequential class order display .0336ms; , on , forth until of images (or "frames") play out seamlessly fluid, user assume he/she seeing video. not knowing it's .gif on steroids.

here's more verbose way of explaining intended result:

you have 1 second super awesome 1080p video clip (video format doesn't matter helping answer question, assume lossless , pretty k?). it's recorded @ 29.97 frames per second. break each frame it's own massive image file, leaving 30 images. 24 frames second mean you'd have 24 images, 60 frames per second mean you'd have 60 images, etc., etc., excedera.

if have ever used cinema4d, output looking recreate reflexive of animation render, left .tiff per frame, placed side side when uploaded photoshop or viewed in quicktime "slideshow" of images displaying fast likes video.

html this:

<div id="incredible-video">      <div class="image-1">         <img source=url('../movie/scene-one.tiff');/>      </div>      <div class="image-2">         <img source=url('../movie/scene-two.tiff');/>      </div>      <div class="image-3">         <img source=url('../movie/scene-three.tiff');/>      </div>      <div class="image-4">         <img source=url('../movie/scene-four.tiff');/>      </div>      <div class="image-5">         <img source=url('../movie/scene-five.tiff');/>      </div>      ....etc.....      ....etc.....      ....etc..... </div> 

jquery/javascript handle appending sequential image classes instead of writting out hand each "frame".

css like:

#incredible-video img {      position:absolute;      width:100%;      height:auto;      background:cover; } 

but jquery/javascript need to pull off/can done? need happen right after window load, , run on infinite loop. ofcourse audio not happening in example, don't need it. want our end user have visually appealing page, minimal design implemented in ui.

i love video animation, , love sites built full screen backgrounds. site out visual setup , keeping responsive proving strenuous challenge. html5 far, , makes mobile compatibility null , void (data usage protection). .gif files massive compared calling in .mp4, .webm, or .ogg option out.

i've played around adobe edge animate. using edge hero .js library able reproduce similar project this: http://www.edgehero.com/tutorials/starwars-crawl-tutorial

i found worked on devices. cool. made me think maybe it's possibly use program or hit jquery/javascript directly achieve desired effect.

thanks taking @ 1 guys.

-cheers, branden dane

i found viable solution looking do. it's rather interesting. answer it's introduces many interesting ideas on how can display kind of content dynamically on site, in app, or a full fledged software application.

the answer came while diving hard webgl, canvas animation (both 2d , 3d), 2d video games techniques, , 3d video game techniques. instead of looking "perfect" workflow, if interested in creating visually effective design , seeing bleeding edge can thoughts on development, skip gui's. ignore ads software promising make things doable in 5 min. it's not. getting there. 3 major events have forward in few months

1.) universal agreement implment webgl natively in opera, chrome , firefox (ofcourse), safari move ship webgl enabled, compered user having enable manually, , ie going try , give go (in ie 12).

2.) unity 3d, industry standard in game development, has announced next month release version 5, , complete, intuitive workflow start exporting in javascript (not json actual javascript). three.js library more 1 of popular of seemingly endless games engines out today.

how answer initial question?: though webgl has been around 3 years now, starting see shine. it's far more simple video game engine. threejs have full working javascript library, capable of rendering in webgl, canvas, or few css3 magic. can't use great movie mobile background? ruining overall ui? cheer up. threejs can working both 2d , 3d javascript draw function, though not @ same time. hover other libraries exist allow bypass rule.

and drum roll. is, or can made in responsive or adaptive way.

the answer question came looking @ custom preloaders. realizing can create incredible looping animations in ae, , export them gifs offered quality wanted, not control, no optimization, sound. however, png sequences can exported. epiphany hit. before using solve problem, i'd leave list of material looking move beyond easy development , challenge limits can use reference guide. in order began now. hope helps someone. time find out worth it.

1.) webgl-three.js webgl opened eyes new world. it's technology evolving , here stay. in nutshell, live applications create have access more cpu, graphics card well. gpu's getting more , more powerful, , not unreasonably priced, possibilities endless. idea playing crysis 3 "in-browser" without need of 3rd party client no fiction. it's future. apply websites. mind blown.

2.) first cinema4d, start working around verold.com & playcanvas.com c4d personal favorite because if it's easy integration ae. find exporting 3d models, textures, mesh's, three.js (or game engine period) blender supported. of writing this, 2 separate c4d workflows threejs. both tedious, not going work, , unnecessary. playcanvas bit of let down. verold, excellent browser based 3d editor in can import variety of files (even fbx baked animations!) , when satisfied can export standalone client or iframe. standalone client superb. bit glitchy, have patience. shouldn't comfortable way. go roots.

3.) iphone app development, android app dev (to impressive extent), web sites, web apps, , more function in way application need made using javascript, html/5 , css/3. once understood, , truth hits how control may not have known had, day becomes indeed. learn code. million untested , horrible "gui's" out there claim want, avoid useless search. learn code. can never go wrong @ point.

4.)what code need learn? javascript essential. more on in moment. dive creating apps of kind threejs. mr. doob (co-creator of library) has excellent, well-documented website tons of examples, tuts, , source code dive into. chrome experiments next awesome option see how people taking kind of development new level. in process of learning threejs, you'll become more proficient javascript. start play things maybe never had to, json, or xml files packaging data. you'll learn how simple implement three.js webgl render, or fallbacks canvas , css3d if , when possible.

before going on, make caveat. believe once unity 3d drops threejs fro pro , free users, see much more 3d in web. in case, can't hurt download software , play around bit. serves an excellent visual editor. there exporters unity 3d threejs, again still pre alpha stage.

1. 2d or not 2d. question after getting little dirty 3d moved drawing in 2d realm using canvas. flash still seems viable tool, again, it's code. learn how , may find flash costing time. found 2d more difficult 3d because nature of 2d has yet radically change, @ least in lifetime. you'll need start learning spritesheet creation tutorials. nothing incredible hard if know look. use photoshop, or equivalent application. create many "movement" frames if put in gif enough seamlessly loop sprite. or render master image out , cut around elements naturally distinct pats. ex: want make guy have standing on street corner created, stays. cut character in many separate png files believe need. second method using same sprite sheet brought in first try. first scenario meant writing css selector , have javascript written regular user become increasingly difficult.

first solution: using css , javascript plot "frames" meticulously put in sprite sheet. can become pain if not done correctly way through.

second solution: lose frame frame effect if need it, our overall 2d animations incredible. also, building in way creates more efficient games when implementing physics engines , setting collision detectors. still use same sprite sheet, need choose frames need. idea use dynamic tweening between frames called via javascript. in end have animated sprite, have done 1 frame. ex: have stickman want show walking in straight line. solution 1 jump frame frame, creating mild chop, illustrate animated walk. in solution 2, take stick man , chop dynamic bits apart can call them through javascript, build our sprite javascript directly. create walking effect, cut apart stickmans legs , have separate in sprite sheet rest of body (unless need animate body part well). map out coordinates each piece of stickman. free software darkfunctioneditor 1 of many programs instantly take care of generating reliable sprite sheet, printing out coordinates of sprite sheet after bake it. knowledge, head javascript , call in variables wish associate pieces of stick man , corresponding coordinates. use javascript "build" pieces together. walking animation accomplished tween talked earlier. each leg runs on beautifully fluid path set in javascript. no chop. easy customize , control. if want make easier yourself, try using 1 of many libraries sprite animation. favorite @ moment being createjs.

if looking include collision detection or create particle systems need physics engine. 2d torn between 2 @ moment. right put physicsjs on kineticjs. both fantastic. believe physicsjs integrates caccoonjs , other mobile scripts easier.

my last words of advice are=, after reading this, understand working javascript. have bit of jquery make easy, encounter things difficult on way. huge recommendation move learning how build using nodejs. it's asynchronous javascript server-side , client-side development space. documentation wonderful. first stop should learing npm, , bower. understand how implement grunt workflow. try out nodejs assets yeoman give "boilerplate" node setups start with. after start understanding nodejs mechanics , feel comfortable setting initial package.json, you'll find javascript feel it's writing after point.

and that's need know 2d , 3d design , development. initial question have been answered using 3d rendered fullscreen. final conclusion came in different method entirely.

after learning 2d sprites , framing, noticing encoding process of gifs. had idea try , create png sprite animations. not png gifs, per say. rather creating 2d scene , using png sequence animate via javascript. found few great libraries on github, both idea , cool ideas gif manipulation. final choices github repo "jquery.animatesprite" instead of mulling through sprite sheets, take individual png's , library gives incredible amount of control in how can store variables later use, animations can pull off in general. full screen, responsive background works on device (and can animated sound....) i'd recommend technique. works flip book animation works, except much more effectively.

i hope helps along way. if have question on have mentioned here, or know of area needs further detail, means please let me know.

-cheers

---