Show HN: BigVideo.js | Hacker News Reader

Show HN: BigVideo.js

dfcb.github.com

244 pointsjohnpolacek48 comments

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.

Looking at the source, he uses jQuery under the hood for (at least) element manipulation, event handling, and the ui-slider. So the effort is non-trivial, although it probably wouldn't be too difficult for someone to rewrite it if motivated.

Nice work + demo, btw.

As a fervent Mootools supporter I couldnt agree more, but at the same time i've pretty much given up trying to not use jQuery. Unfortunately it does seem like "jQuery Won" the core-framework wars. Use it or GTFO according to most web devs nowdawys. At least they're making it modular now so you can roll your own.

I've seen lots of js projects that have a jQuery dependency for the sole reason of selecting elements.

It's fairly trivial to cook up a simple jQuery like selector but others have already done it: e.g. https://github.com/ryt/Selector

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.

Yeah, I JUJ'd it.™ (just use jQuery)

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.

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.

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.

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.

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.

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.

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.

It has a similar effect to Flash ads on my laptop, the fan fires up to full power, so yes, an off button please.

Like the "Video playing" checkbox on the left? ;-)

Added a play toggle to the demo page.

Teehan+Lax shows how this effect can be applied subtly : http://www.teehanlax.com/

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.

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.

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

Pull requests are always welcome! ;)

What makes BigVideo far better?

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

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.

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

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....)

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.

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

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.

I use http://buzz.jaysalvat.com/

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

I love that film. Own the BluRay.

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

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

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

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...

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.

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.

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

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

Nice, I like it.

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

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

Horrible on a slow internet connection

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

Works great for me. Chrome 21.0.1180.79 m.

Nice work. :D

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

nice work! running great on chrome 21/win7

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.

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?

Reply on news.ycombinator.com