Some nerdy details about the whiskey theater



Video immersion

We just launched a shiny new HTML5 video player and I wanted to briefly point of some interesting stuff about it. It's not a replacement to the current video player, just a little something extra. It's up on all sites for subscribers: http://www.giantbomb.com/video/theater/.
 
  • Uses the same video files we serve to the flash player: H.264 in mp4
  • Uses the flexible box model. If you're a CSS guy, this is awesome.
  • Uses history.pushState to change the URL in the address bar and your history without reloading the page
  • You can save videos to a playlist
 

The future!

I'll be adding bits and bobs here and there as we go along. If you have any suggestions, send me a PM or leave a comment.
 

Pro Tips!

  • In Chrome, shift + command + f makes the browser full screen. You can't do that in Safari and there's no programatic access it in any browser because of OS spoofing. 
  • Use the spacebar to play/pause
  • Start typing to search for something
 

Sorry Duder

The theater only works in browsers with H.264 video support, like Chrome and Safari. 
66 Comments
67 Comments
  • 67 results
  • 1
  • 2
Edited by gpbmike


Video immersion

We just launched a shiny new HTML5 video player and I wanted to briefly point of some interesting stuff about it. It's not a replacement to the current video player, just a little something extra. It's up on all sites for subscribers: http://www.giantbomb.com/video/theater/.
 
  • Uses the same video files we serve to the flash player: H.264 in mp4
  • Uses the flexible box model. If you're a CSS guy, this is awesome.
  • Uses history.pushState to change the URL in the address bar and your history without reloading the page
  • You can save videos to a playlist
 

The future!

I'll be adding bits and bobs here and there as we go along. If you have any suggestions, send me a PM or leave a comment.
 

Pro Tips!

  • In Chrome, shift + command + f makes the browser full screen. You can't do that in Safari and there's no programatic access it in any browser because of OS spoofing. 
  • Use the spacebar to play/pause
  • Start typing to search for something
 

Sorry Duder

The theater only works in browsers with H.264 video support, like Chrome and Safari. 
Posted by tobygw

Awesome sauce

Edited by wolf_blitzer85

I can get behind this. 
 
So is this available now?

Posted by HydraHam

If only comcast would give me the speeds i pay for, i have to DL the videos 90% of the time because awesome comcast likes to give me 1/10th of what i pay for and it makes everything buffer >.<

Edited by Kierkegaard

Looks beautiful! How exactly to I make it appear, though? I'm a subscriber using Chrome  and everything but I'm just getting the old player. Need I delete cookies or jump through some other hoop? 
 
Edit: Heh, or I could just click on that helpful link up top. Never mind. 

Posted by Sin4profit
@gpbmike: i've started using Chrome for my video heavy sites anyway. Firefox didn't handle video very well for me and just seemed to get worse.
Posted by AlisterCat

When will Mozilla ditch OGG and go with H.264. Come on Mike, please tell me there's hope.

Posted by TurboMan

works pretty good... dunno if this will replace the way I watch your videos (Playlist is a good idea though)

Posted by Hamz

Pretty awesome stuff :)

Posted by gpbmike
@Kierkegaard: Added a link. It's just /video/theater/ on any whiskey site. 
@wolf_blitzer85:
 Available NOW! I added a link.
Posted by wolf_blitzer85
@gpbmike said:
" @Kierkegaard: Added a link. It's just /video/theater/ on any whiskey site. 
@wolf_blitzer85:
 Available NOW! I added a link. "
Awesome thanks dude! 
 
Looks all fancy and stuff.
Posted by Milkman

Is this just subscriber-only for now or is that permanent? 

Posted by Sin4profit
@gpbmike:   
Tested it...my suggestions: 
 
works well enough, only thing that bothers me about it is the Menu seems to linger longer then i'd like. 
 
I'm no programmer but i'd suggest the auto hide be half of what it is now, at the most, or create some kind of mouse deadzone so the slightest nudge doesn't bring up the menu when you don't want it, or ( i think the best choice ) have the menu instantly auto hide when i place my cursor at the top of my screen.
Posted by General_D23

No Firefox makes me sad. 
 
Still, tried it a bit in Chrome and it seems alright. Playlist is a fantastic idea, overall it's pretty slick, some kinks, but that's to be expected. Awesome stuff!

Posted by CharlesAlanRatliff
@Styl3s said:
" If only comcast would give me the speeds i pay for, i have to DL the videos 90% of the time because awesome comcast likes to give me 1/10th of what i pay for and it makes everything buffer >.< "
I download all of my videos for this very reason.  
 
The theater looks cool, but I won't be able to use it most of the time. Great work!
Posted by Wes899

How do I choose Streaming/Progressive or the quality of the video?

Posted by gpbmike
@Sin4profit: An area to move your cursor to to hide the UI is a good idea. On the list! 
 
@Wes899: It's kind of both actually. Technically it points to the "progressive" file, but you can jump to any point in the video, so it acts like it's streaming.
Posted by Wes899
@gpbmike: Ah ok. Thanks. Very slick.
Posted by Gilsham
@gpbmike said:

Pro Tips!

  • In Chrome, shift + command + f makes the browser full screen. You can't do that in Safari and there's no programatic access it in any browser because of OS spoofing. 
  • Use the spacebar to play/pause
  • Start typing to search for something
  
>.> just hit f11 in chrome to fullscreen it, and in windows vista/7 you can also hit winkey + up to maxumise a window if you like to keep tabs etc
Posted by gpbmike
@gilsham: pft, windows. I kid, I kid. Thanks.
Posted by OtakuGamer

Looks nice, but are there any benefits of using this between the normal video player? 

Posted by VetleNM

H.264, huh? That sucks for Firefox and Opera users, though I guess that's more their fault rather than yours. :\ Oh well. Tested it out with Chrome on my netbook, and it runs surprisingly smooth when compared to the flash video on the site now (where even low quality streaming is unplayable). Seemed like the progress bar was messed up though, probably? because of the slowdown. Other than that, I really like the design of it, so kudos. Seems like a great addition to the site.

No chance what so ever of supporting Theora in the future, right? I guess I'll just have to cross my fingers that Opera will completely reverse their stance and implement H.264 support. Seems like it's the way of the future, what with YouTube and practically every other HTML5 video streaming website out there.

Posted by Mrnitropb
@OtakuGamer said:
" Looks nice, but are there any benefits of using this between the normal video player?  "
Playlists for watching the endurance runs?
Posted by ReyGitano

This is awesome. Great job duders.

Posted by gpbmike
@VetleNM: I don't think there are any plans for other video formats in the HTML5 player. But that's also why we're keeping the flash player. 
Posted by LordAndrew

When I switch my Firefox user agent to Chrome, it tells me the video player done broke, which is expected since Firefox doesn't support H.264 natively. But when it's on the default user agent setting, it tells me my browser's incompatible then tells me it done broke. Is the second message supposed to happen? Shouldn't the video player have stopped trying or something? The fewer modal alert()s, the better.

Posted by Droop

Should I start using another browser? Been using Firefox for ages :o

Edited by gpbmike
@LordAndrew: I'm not actually disabling anything based on your browser. So even if you use FireFox it will still try to play the video. The first alert is more of a warning. The second alert is an actual error from the video player. You can still get the second alert in Chrome or Safari if something bad happens.
Posted by Godot
@Mrnitropb said:
" @OtakuGamer said:
" Looks nice, but are there any benefits of using this between the normal video player?  "
Playlists for watching the endurance runs? "
Oh man that would be dangerous to my productivity.
Posted by gpbmike
@Droop: Depends on your reasons for using FireFox. If someone said they would give you a billion dollars to continue to use FireFox, then I'd just keep on truckin with FireFox.
Edited by AlwaysBeClothing

Was wondering how Vinny was adding videos to a list!  I look forward to using this to complete my 100 list quest with the search function!     
 
Would it be possible to scroll through more than 2 pages of results?  Or is that by design to keep BW in check? 
 
I'm also having an issue with using the search, clicking on a video then being unable to use the search again without reloading the entire thing.  Still, an awesome thing to have.

Posted by LordAndrew
@gpbmike said:
" @LordAndrew: I'm not actually disabling anything based on your browser. So even if you use FireFox it will still try to play the video. The first alert is more of a warning. The second alert is an actual error from the video player. You can still get the second alert in Chrome or Safari if something bad happens. "
So it's a modal warning box? Ew. I really don't like those. Like when I try to leave the Giant Bomb home page and it stops me in order to inform me it couldn't load promos...
 
Surely there would be some way to implement such warnings into the page in a non-disruptive manner.
Posted by Vitor

Loving the video player so far - really, really easy on the eyes and simple to use. 

Posted by gpbmike
@LordAndrew: I consider it a pretty important warning.
Posted by LordAndrew
@gpbmike: And I'm not saying get rid of the warning, just make the warning less obnoxious, do something that doesn't force me to drop everything I'm doing to read it. If I'm doing something in another tab, I'm not too concerned about what the fancy new video player wants to warn me about.
 
Oh, and the reported warning isn't entirely correct. I tested this thing out in the most recent build of Chromium, which is obviously WebKit based, and it didn't work. I don't think it has anything to do with WebKit. It just needs H.264 support, which most browsers unfortunately do not have due to the patents involved. And that problem simply isn't going to go away. The only way around that is to choose a better-supported codec. I don't think there's a clear ideal codec yet though, so that continues to be problematic. :(
Posted by Jeffsekai
@gpbmike: I think that the Bar at the bottom stays on the screen for way too long after I stop moving the mouse. It sucks too because of how big it is =\
Posted by crusader8463

Cool I guess... not going to switch browsers just for a silly video player though.

Posted by Brenderous

Looks cool. Needs a volume slider. 
 
Is there a way to choose quality?

Edited by benpicko

Is there a way to change the quality, my internet's too slow to do whatever its doing now.

Posted by Joseppie

On a usability note, when I use command+shift+F to make the video go full screen in Chrome, it works but it also recognizes the press of the F key as me starting to search for something. I then have a X that pops up in the middle of the screen that I have to get rid of. Is there any way to have it ignore the F key if command and shift are also pressed at the same time?

Posted by Vitor

So, where exactly is the volume control on the video? Couldn't find it earlier (also didn't look especially hard though so may have just missed it). 
 
Is there also a way to make it full screen without using command+shit+f? Like double click or an icon?

Posted by NickyDubz

First thing first i have put all the ERs in Order in my saved videos....see you guys in 6 months

Posted by TheBeast

Great work! Really awesome stuff. 

     
    A few comments from me: 
    • The playlist popup is a bit frustrating. Would it be possible to have it disappear when the cursor leaves the screen, and only activate on hovering over the bottom third of the video or something?
    • I could do with some feedback when I select a new playlist - as it takes a second to load, you're not immediately aware that your click has had any effect.
    • I'm not sure if this is related to video implementation in the dev build of Chrome I'm using (9.0.597.10) but it seems to freezing quite consistently when switching between videos.
    • Clicking the 'scroll' button on the playlist a few times when you're not at the start/end of the list causes it to 'overshoot' the end and display a blank page.  

 
Posted by CptChiken

This will be awesome

Posted by Sweep

I cant view any of the videos, they won't load at all, i just get a popup that says "Try again or post a bug in the forums." I'm using Chromium  6.0.472.62 (59676)  on Ubuntu. 

Moderator Online
Posted by LordAndrew
@Sweep: Use Chrome or Safari, or some other browser with H.264 support. The WebKit comment is misleading, as it's actually patents that prevent most browsers from supporting the codec.
Posted by Sweep
@LordAndrew: I'm at university so I can't use anything except what is already installed, but I will try chrome when i get home.
Moderator Online
Posted by GlenTennis

Video playlists? I'm sold. Also it just looks better than the old video player.

Posted by X19
@gpbmike: Is this just for subscribers or will it become available for everyone?
Posted by Azteck

So is this purely subscriber stuff or what?

  • 67 results
  • 1
  • 2