5 ms·

Show HN: BigVideo.js

244 points by johnpolacek 14y ago

taf2 14y ago
doesn't work in firefox, the video plays in the background but as a tiny box instead of being full screen
johnpolacek 14y ago
Tested on Firefox 14.0.1 and it is working for me. Which version are you on?
- taf2 14y ago
  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 http://i.imgur.com/Mogn3.png hopefully having the firebug inspector open helps...
  - johnpolacek 14y ago
    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 14y ago
      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.
PythonDeveloper 14y ago
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.
buren 14y ago
nice work! running great on chrome 21/win7
qatalo 14y ago
a better, more compatible alternative would be: http://www.seanmccambridge.com/tubular/ 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 14y ago
  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 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 14y ago
    BigVideo.js would be a FAR better alternative; if you can just fix the browser compatibility issues :)
    - johnpolacek 14y ago
      Pull requests are always welcome! ;)
    - continuations 14y ago
      What makes BigVideo far better?
      - qatalo 14y ago
        mute ambient videos, play series of videos (playlists), image alternate for touch devices. These are not available out of the box on Tubular.
      - deleted 14y ago
        [deleted]
shocks 14y ago
Works great for me. Chrome 21.0.1180.79 m. Nice work. :D
- aklofas 14y ago
  Not on linux though. Wasn't working for me.
vasco 14y ago
Working on Chrome 21.0.1180.79 on Ubuntu. Looks really cool too. Great demos!
cletus 14y ago
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.
- gbelote 14y ago
  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.
- alexanderh 14y ago
  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.
- michaelkscott 14y ago
  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 https://github.com/ryt/Selector
- paulirish 14y ago
  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.
aaronbrethorst 14y ago
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 14y ago
  My recommendation is to detect phones through a combo of screen size and touch support and serve a background image or color instead.
kmfrk 14y ago
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 14y ago
Nice work, but boy do I hope that I never see anything using this on the internet.
- deleted 14y ago
  [deleted]
- juriga 14y ago
  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/ 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.m4v https://s3.amazonaws.com/assets.path.com/v2_home/background....)
andy_herbert 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      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.
- malsme 14y ago
  It has a similar effect to Flash ads on my laptop, the fan fires up to full power, so yes, an off button please.
  - RoryH 14y ago
    Like the "Video playing" checkbox on the left? ;-)
- johnpolacek 14y ago
  Added a play toggle to the demo page.
- dwynings 14y ago
instakill 14y ago
Horrible on a slow internet connection
- TazeTSchnitzel 14y ago
  For ambient video, you could slow it down (say 0.5x or 0.25x) if it buffers too much?
jgv 14y ago
To get this effect by simply dropping in YouTube or Vimeo videos check out this jQuery plugin http://okfoc.us/okvideo/ http://okfoc.us/okvideo/ or http://github.com/okfocus/okvideo http://github.com/okfocus/okvideo.
- johnpolacek 14y ago
  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 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.
cbsmith 14y ago
Excellent choice for default footage. I recognized it immediately: http://www.wildoceanfilm.com/ http://www.wildoceanfilm.com/ I love that film. Own the BluRay.
aswanson 14y ago
This is beautiful. I plan on using this, thanks.
thedeuce 14y ago
ugh i loathe the day when people start doing this shit on their webpage. I remember when i thought <blink> was bad, ahh the grass isn't always greener is it :(
drickster 14y ago
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?
NHQ 14y ago
Nice, I like it. Does BV.getPlayer().play() work on mobile?
propercoil 14y ago
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
melloclello 14y ago
Holy smokes, you chose a cool video to demo it with.
VeejayRampay 14y ago
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 14y ago
  I use http://buzz.jaysalvat.com/ http://buzz.jaysalvat.com/

244 points by johnpolacek 14y ago

taf2 14y ago

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

johnpolacek 14y ago

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

taf2 14y ago
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 http://i.imgur.com/Mogn3.png hopefully having the firebug inspector open helps...
- johnpolacek 14y ago
  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 14y ago
    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.

PythonDeveloper 14y ago

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.

buren 14y ago

nice work! running great on chrome 21/win7

qatalo 14y ago

a better, more compatible alternative would be: http://www.seanmccambridge.com/tubular/ 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 14y ago
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 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 14y ago
  BigVideo.js would be a FAR better alternative; if you can just fix the browser compatibility issues :)
  - johnpolacek 14y ago
    Pull requests are always welcome! ;)
  - continuations 14y ago
    What makes BigVideo far better?
    - qatalo 14y ago
      mute ambient videos, play series of videos (playlists), image alternate for touch devices. These are not available out of the box on Tubular.
    - deleted 14y ago
      [deleted]

shocks 14y ago

Works great for me. Chrome 21.0.1180.79 m. Nice work. :D

aklofas 14y ago
Not on linux though. Wasn't working for me.

vasco 14y ago

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

cletus 14y ago

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.

gbelote 14y ago
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.
alexanderh 14y ago
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.
michaelkscott 14y ago
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 https://github.com/ryt/Selector
paulirish 14y ago
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.

aaronbrethorst 14y ago

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 14y ago
My recommendation is to detect phones through a combo of screen size and touch support and serve a background image or color instead.

kmfrk 14y ago

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 14y ago

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

deleted 14y ago
[deleted]
juriga 14y ago
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/ 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.m4v https://s3.amazonaws.com/assets.path.com/v2_home/background....)

andy_herbert 14y ago

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 14y ago
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 14y ago
  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 14y ago
    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.
malsme 14y ago
It has a similar effect to Flash ads on my laptop, the fan fires up to full power, so yes, an off button please.
- RoryH 14y ago
  Like the "Video playing" checkbox on the left? ;-)
johnpolacek 14y ago
Added a play toggle to the demo page.
dwynings 14y ago

instakill 14y ago

Horrible on a slow internet connection

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

jgv 14y ago

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

johnpolacek 14y ago
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 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.

cbsmith 14y ago

Excellent choice for default footage. I recognized it immediately: http://www.wildoceanfilm.com/ http://www.wildoceanfilm.com/ I love that film. Own the BluRay.

aswanson 14y ago

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

thedeuce 14y ago

ugh i loathe the day when people start doing this shit on their webpage. I remember when i thought <blink> was bad, ahh the grass isn't always greener is it :(

drickster 14y ago

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?

NHQ 14y ago

Nice, I like it. Does BV.getPlayer().play() work on mobile?

propercoil 14y ago

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

melloclello 14y ago

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

VeejayRampay 14y ago

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 14y ago
I use http://buzz.jaysalvat.com/ http://buzz.jaysalvat.com/