7 ms·
Bideo.js – Easy Background HTML5 Videos
- fessa 10y agoIt doesn't look like it works on mobile though.
- andreapaiola 10y agoIt's a feature :D
- andybak 10y agoHmmm. You can't assume the desirability of background video always correlates to use of a mobile OS. It correlates more strongly to related factors such as connection speed, battery vs AC power and CPU speed. My laptop tethered and away from mains probably doesn't want background video. A docked high-end tablet probably does.
- evan_ 10y agoPossible use case for the Battery Status API: https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API https://developer.mozilla.org/en-US/docs/Web/API/Battery_Sta...
- ecesena 10y agoDoes it require clicking for permission? I hope no, otherwise it would defeat the purpose...
- pdkl95 10y agoIf websites cannot act responsibly and make video and/or audio click-to-play[1], they are going to be added to the killfile. "Adblockers" are also useful for blocking annoyances[2], not just ads. [1] or some other opt-in user option [2] e.g. https://github.com/easylist/easylist/blob/master/fanboy-addon/fanboy_annoyance_general_hide.txt https://github.com/easylist/easylist/blob/master/fanboy-addo...
- torgoguys 10y agoGrandparent comment may refer to basically never wanting such video (which is my preference). In other words, the "feature" of the implementation being broken on mobile should also be ported to desktops.
- taf2 10y agoOne thing I like on mobile instead is to load a few key frames at a fixed interval.
- binarydreams 10y agoAlmost not possible to control atm with current APIs
- binarydreams 10y agoThe demo works on mobile but ya not entirely responsive in a lot of cases. Will be done soon.
- untog 10y agoIt likely can't - videos are enforced as tap-to-play on iPhones, no matter what. Which is good in most ways, but also means that people are converting videos into hugely bandwidth-wasting GIFs instead. I'd rather videos be "tap for sound" and autoplay at this point.
- detaro 10y agoHow do I get click-to-play for all HTML5 videos in my browser?
- binarydreams 10y agoI will be implementing click to play and pause (necessary for iOS, etc.). Contributions welcome! :)
- binarydreams 10y agoAuthor here. Wrote an article on the process including certain issues as well - http://codetheory.in/html5-fullscreen-background-video/ http://codetheory.in/html5-fullscreen-background-video/ I did try to work around slow network speed (can see in the network_speed_optim branch on github but with the current APIs it's a tough problem to crack. The current implementation is basic but works well. Suggestions welcome so that I can improve it.
- bpedro 10y agoInteresting solution but can't it be achieved with the object-fit CSS property? Using `object-fit: cover` will make the video resize maintaining its aspect ratio and filling its entire box. See https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit for more info.
- addedlovely 10y agoCame here to say the same: http://caniuse.com/#feat=object-fit http://caniuse.com/#feat=object-fit
- binarydreams 10y agoInteresting! It works pretty well except that there's no IE support. So the resizing logic included in the library is useful for projects that need IE10+ support.
- bpedro 10y agoYou can always use a polyfill like this one: https://github.com/jonathantneal/fitie https://github.com/jonathantneal/fitie
- electic 10y agoI am on Chrome on a Mac. Doesn't work.
- lambdacomplete 10y agoMe too and it does.
- chinchang 10y agoYeah, doesn't work on http. Try https://rishabhp.github.io/bideo.js/ https://rishabhp.github.io/bideo.js/ Works gr8!
- electic 10y agoAh that was the problem, thanks!
- wanda 10y ago.bg-video { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1 /* don't set a background color or image on body */ } I mean, why do you need JavaScript?
- angry-hacker 10y agoBecause the dimension are wrong. Right now you can get it right only with javascript.
- gelatocar 10y agoWhat do you mean by the dimensions are wrong? I use the same css above and it works fine.
- angry-hacker 10y agoFrom the submission's page: codetheory.in/html5-fullscreen-background-video/ This explains it what problem does it try to solve.
- binarydreams 10y agoTry https if the page doesn't load.
- rhubarbquid 10y agoLike other background videos I've seen, this prevents the computer from sleeping in Mac OS with Chrome (but not Safari).