
Show HN: BigVideo.js - johnpolacek
http://dfcb.github.com/BigVideo.js/
======
cletus
Nice work but one comment: it's not clear to me why this is a jQuery plugin.
In the setup you simply install a constructor (ie new $.BigVideo()) and that's
it.

Unless there's more to it than that IMHO you'd be better served making it
independent of jQuery. As popular as jQuery is, it's not a given.

~~~
paulirish
Things from BigVideo that would be varying degrees of PITA to roll your own,
pending the browser support:

    
    
      * measuring window size 
      * creating a slider slider component without full <input type=range support>
      * having appropriate snap points on that slider
      * event model normalization
      * pub/sub
      * detecting when an image asset has loaded
      * $(body).prepend() equivalence: insertBefore() can throw if someone's HTML has a comment comment directly inside the body tag (typical with HTML5 Boilerplate code)
    

Sure it'd be _nice_ to have this be plain old JS, but as a developer you're
signing up for a lot of pain that is merely just plumbing required to build
your unique component. If BigVideo was targeting IE10 and everyone else, then
we'd have a much better looking story in the code.

~~~
DigitalSea
The exact reason I use jQuery for projects that aren't jQuery projects myself.
The years of work and testing that have gone into jQuery make it an invaluable
asset when working with Javascript and if you were to do what jQuery and
dozens of contributors have been doing the past 5 years that would be one hell
of a project.

This couldn't have come at a better time. I've just been tasked with creating
a landing page with full-screen background scaling video and this plugin will
make my life easier.

------
jgv
To get this effect by simply dropping in YouTube or Vimeo videos check out
this jQuery plugin <http://okfoc.us/okvideo/> or
<http://github.com/okfocus/okvideo>.

~~~
johnpolacek
Another guy posted about the tubular plugin as well.

One thing BigVideo.js has is controls you can customize and I have an example
where you can do autohiding of content on top of the background.
<http://dfcb.github.com/BigVideo.js/example-playlist.html>

Also BigVideo.js is built on the Video.js api, so those methods are available
to you.

------
andy_herbert
I really hope the websites that implement this also supply an off-switch, it
looks great but detracts away from the text and reduces readability.

~~~
ChuckMcM
I was worried about that too, it looks cool, makes the text hard to read
because its distracting, and ultimately might result in a bunch of pages which
get less useful.

~~~
phereford
IMO, it probably wouldn't be best to put this on a page with content is the
main factor. This is sort of cool for branding/marketing and can have a big
impact in that arena.

~~~
mitjak
Then, perhaps, it shouldn't do so on its project page and instead link to a
demo. I found it extremely distracting just reading the project web page at
all, never mind all the sudden fan noise.

------
qatalo
a better, more compatible alternative would be:
<http://www.seanmccambridge.com/tubular/>

upload your video to youtube, and use Tubular to serve it. +save bandwidth

or modify the JS to use an flv swf on your server.

~~~
johnpolacek
That is really, really cool. Did not know about that one.

Can you add custom controls? Like in this BigVideo example below (click one of
the playlist buttons on the left):
<http://dfcb.github.com/BigVideo.js/example-playlist.html>

Another benefit is the BigVideo.js is built on the Video.js api, so all those
methods are available to you.

~~~
qatalo
BigVideo.js would be a FAR better alternative; if you can just fix the browser
compatibility issues :)

~~~
continuations
What makes BigVideo far better?

~~~
qatalo
mute ambient videos, play series of videos (playlists), image alternate for
touch devices. These are not available out of the box on Tubular.

------
kmfrk
Great job, man.

However, this project and another that is on the frontpage of HN reminded me
that projects like these should always come with a checklist of browsers that
support them, even though it is meant to be implicit that all browsers should
support the projects.

I don't know if there's a Travis CI-like solution available to solve this
task, but it's be useful and relevant if there is.

------
JulianWasTaken
Nice work, but boy do I hope that I never see anything using this on the
internet.

~~~
juriga
As with all flashy (pun intended) web technologies, they can be effective if
used with good taste and in moderation.

For example, the Path landing page uses a well designed background video and
falls back to a simple image if the video isn't available: <https://path.com/>

(Incidentally the background video didn't load for me every time. Straight
link to the video:
[https://s3.amazonaws.com/assets.path.com/v2_home/background....](https://s3.amazonaws.com/assets.path.com/v2_home/background.m4v))

------
aaronbrethorst
It automatically takes over the screen of my iPhone when I navigate to it.
Great for desktops, and a killer way to Rickroll iOS users.

~~~
johnpolacek
My recommendation is to detect phones through a combo of screen size and touch
support and serve a background image or color instead.

------
VeejayRampay
That's pretty cool.

Now I'm still wondering how to autoplay a mp3 on page load and on subsequent
clicks on a button. I've tried tinkering with an audio tag, never worked. The
future is now. Kind of.

~~~
danneu
I use <http://buzz.jaysalvat.com/>

------
cbsmith
Excellent choice for default footage. I recognized it immediately:
<http://www.wildoceanfilm.com/>

I love that film. Own the BluRay.

------
propercoil
Set up a vm to check compatibility and this will take off. I've been using
alot of plugins that overheated my laptop and this somehow doesn't do that so
very nice

------
vasco
Working on Chrome 21.0.1180.79 on Ubuntu. Looks really cool too. Great demos!

------
johnpolacek
Tested on Firefox 14.0.1 and it is working for me. Which version are you on?

~~~
taf2
14.0.1 - OSX, it starts the video as a tiny square box. if I leave the tab and
come back it'll take up the full screen.

[update]: this is amazing great work!

[update]: here is a screenshot: <http://i.imgur.com/Mogn3.png> hopefully
having the firebug inspector open helps...

~~~
johnpolacek
Thanks! I'll have to do some more work on getting it to work right on Firefox.
It is a little different since FF doesn't have native h.264 support so it goes
to a Flash fallback. I wanted to make it easy, so that you would just have one
source video, rather than do the .ogg/.webm cascade. So...I'll have to work a
little more on getting the flash fallback player to scale better/faster.

~~~
Zirro
Running Nightly (Firefox alphas) and it works here. The fallback to Flash
explains why it's so laggy here on OS X though, making it a distraction rather
than a positive addition to the site.

Still, I like the idea behind it and I hope these things can be solved in
later versions.

------
melloclello
Holy smokes, you chose a cool video to demo it with.

------
aswanson
This is beautiful. I plan on using this, thanks.

------
NHQ
Nice, I like it.

Does BV.getPlayer().play() work on mobile?

------
taf2
doesn't work in firefox, the video plays in the background but as a tiny box
instead of being full screen

------
instakill
Horrible on a slow internet connection

~~~
TazeTSchnitzel
For ambient video, you could slow it down (say 0.5x or 0.25x) if it buffers
too much?

------
shocks
Works great for me. Chrome 21.0.1180.79 m.

Nice work. :D

~~~
aklofas
Not on linux though. Wasn't working for me.

------
buren
nice work! running great on chrome 21/win7

------
PythonDeveloper
Does not work on Chromium 18.0.1025.168 on Ubuntu, but does work on Firefox
14.01 Ubuntu.

Also, video does not resize when browser size changes, leaving content
missing.

Nice work tho.

------
drickster
nice man. this is a really awesome plugin that would be super useful for my
new site I'm looking to launch soon.

Have you noticed any effect on site performance in terms of speed with this
plugin installed?

