Something went wrong. Try again later

gpbmike

This user has not updated recently.

923 1518 60 680
Forum Posts Wiki Points Following Followers

Some nerdy details about the whiskey theater



Video immersion
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. 
65 Comments

67 Comments

Avatar image for gpbmike
gpbmike

923

Forum Posts

1518

Wiki Points

0

Followers

Reviews: 0

User Lists: 13

Edited By gpbmike


Video immersion
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. 
Avatar image for tobygw
tobygw

666

Forum Posts

390

Wiki Points

0

Followers

Reviews: 2

User Lists: -1

Edited By tobygw

Awesome sauce

Avatar image for wolf_blitzer85
wolf_blitzer85

5460

Forum Posts

2

Wiki Points

0

Followers

Reviews: 0

User Lists: 6

Edited By wolf_blitzer85

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

Avatar image for hydraham
HydraHam

1380

Forum Posts

675

Wiki Points

0

Followers

Reviews: 0

User Lists: 6

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

Avatar image for kierkegaard
Kierkegaard

718

Forum Posts

4822

Wiki Points

0

Followers

Reviews: 10

User Lists: 2

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. 

Avatar image for sin4profit
Sin4profit

3505

Forum Posts

1621

Wiki Points

0

Followers

Reviews: 37

User Lists: 2

Edited 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.
Avatar image for alistercat
alistercat

8533

Forum Posts

7626

Wiki Points

0

Followers

Reviews: 2

User Lists: 27

Edited By alistercat

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

Avatar image for turboman
turboman

10064

Forum Posts

19

Wiki Points

0

Followers

Reviews: 23

User Lists: 11

Edited By turboman

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

Avatar image for hamz
Hamz

6900

Forum Posts

25432

Wiki Points

0

Followers

Reviews: 2

User Lists: 5

Edited By Hamz

Pretty awesome stuff :)

Avatar image for gpbmike
gpbmike

923

Forum Posts

1518

Wiki Points

0

Followers

Reviews: 0

User Lists: 13

Edited By gpbmike
@Kierkegaard: Added a link. It's just /video/theater/ on any whiskey site. 
@wolf_blitzer85:
 Available NOW! I added a link.
Avatar image for wolf_blitzer85
wolf_blitzer85

5460

Forum Posts

2

Wiki Points

0

Followers

Reviews: 0

User Lists: 6

Edited 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.
Avatar image for milkman
Milkman

19372

Forum Posts

-1

Wiki Points

0

Followers

Reviews: 2

User Lists: 3

Edited By Milkman

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

Avatar image for sin4profit
Sin4profit

3505

Forum Posts

1621

Wiki Points

0

Followers

Reviews: 37

User Lists: 2

Edited 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.
Avatar image for general_d23
General_D23

1210

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 2

Edited 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!

Avatar image for charlesalanratliff
CharlesAlanRatliff

5763

Forum Posts

13647

Wiki Points

0

Followers

Reviews: 0

User Lists: 34

@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!
Avatar image for raviolisumo
raviolisumo

2263

Forum Posts

243

Wiki Points

0

Followers

Reviews: 0

User Lists: 3

Edited By raviolisumo

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

Avatar image for gpbmike
gpbmike

923

Forum Posts

1518

Wiki Points

0

Followers

Reviews: 0

User Lists: 13

Edited 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.
Avatar image for raviolisumo
raviolisumo

2263

Forum Posts

243

Wiki Points

0

Followers

Reviews: 0

User Lists: 3

Edited By raviolisumo
@gpbmike: Ah ok. Thanks. Very slick.
Avatar image for gilsham
Gilsham

304

Forum Posts

54

Wiki Points

0

Followers

Reviews: 0

User Lists: 4

Edited 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
Avatar image for gpbmike
gpbmike

923

Forum Posts

1518

Wiki Points

0

Followers

Reviews: 0

User Lists: 13

Edited By gpbmike
@gilsham: pft, windows. I kid, I kid. Thanks.
Avatar image for vetlenm
VetleNM

89

Forum Posts

38

Wiki Points

0

Followers

Reviews: 0

User Lists: 4

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

Avatar image for mrnitropb
Mrnitropb

2131

Forum Posts

1689

Wiki Points

0

Followers

Reviews: 3

User Lists: 4

Edited 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?
Avatar image for reygitano
ReyGitano

2493

Forum Posts

2112

Wiki Points

0

Followers

Reviews: 2

User Lists: 10

Edited By ReyGitano

This is awesome. Great job duders.

Avatar image for gpbmike
gpbmike

923

Forum Posts

1518

Wiki Points

0

Followers

Reviews: 0

User Lists: 13

Edited 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. 
Avatar image for lordandrew
LordAndrew

14609

Forum Posts

98305

Wiki Points

0

Followers

Reviews: 0

User Lists: 36

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

Avatar image for droop
droop

1929

Forum Posts

710

Wiki Points

0

Followers

Reviews: 0

User Lists: 7

Edited By droop

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

Avatar image for gpbmike
gpbmike

923

Forum Posts

1518

Wiki Points

0

Followers

Reviews: 0

User Lists: 13

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.
Avatar image for godot
Godot

218

Forum Posts

17

Wiki Points

0

Followers

Reviews: 0

User Lists: 4

Edited 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.
Avatar image for gpbmike
gpbmike

923

Forum Posts

1518

Wiki Points

0

Followers

Reviews: 0

User Lists: 13

Edited 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.
Avatar image for alwaysbeclothing
alwaysbeclothing

2078

Forum Posts

6765

Wiki Points

0

Followers

Reviews: 2

User Lists: 4

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.

Avatar image for lordandrew
LordAndrew

14609

Forum Posts

98305

Wiki Points

0

Followers

Reviews: 0

User Lists: 36

Edited 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.
Avatar image for vitor
vitor

3088

Forum Posts

51

Wiki Points

0

Followers

Reviews: 0

User Lists: 2

Edited By vitor

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

Avatar image for gpbmike
gpbmike

923

Forum Posts

1518

Wiki Points

0

Followers

Reviews: 0

User Lists: 13

Edited By gpbmike
@LordAndrew: I consider it a pretty important warning.
Avatar image for lordandrew
LordAndrew

14609

Forum Posts

98305

Wiki Points

0

Followers

Reviews: 0

User Lists: 36

Edited 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. :(
Avatar image for jeffsekai
Jeffsekai

7162

Forum Posts

1060

Wiki Points

0

Followers

Reviews: 0

User Lists: 5

Edited 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 =\
Avatar image for crusader8463
crusader8463

14850

Forum Posts

4290

Wiki Points

0

Followers

Reviews: 7

User Lists: 5

Edited By crusader8463

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

Avatar image for brenderous
Brenderous

1299

Forum Posts

360

Wiki Points

0

Followers

Reviews: 1

User Lists: 11

Edited By Brenderous

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

Avatar image for benpicko
benpicko

2020

Forum Posts

7

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

Edited By benpicko

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

Avatar image for joseppie
Joseppie

836

Forum Posts

30594

Wiki Points

0

Followers

Reviews: 4

User Lists: 4

Edited 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?

Avatar image for vitor
vitor

3088

Forum Posts

51

Wiki Points

0

Followers

Reviews: 0

User Lists: 2

Edited 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?

Avatar image for nickydubz
NickyDubz

380

Forum Posts

8

Wiki Points

0

Followers

Reviews: 0

User Lists: 5

Edited By NickyDubz

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

Avatar image for thebeast
thebeast

1920

Forum Posts

13373

Wiki Points

0

Followers

Reviews: 0

User Lists: 7

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

 
Avatar image for cptchiken
CptChiken

2057

Forum Posts

13187

Wiki Points

0

Followers

Reviews: 2

User Lists: 3

Edited By CptChiken

This will be awesome

Avatar image for sweep
sweep

10887

Forum Posts

3660

Wiki Points

0

Followers

Reviews: 4

User Lists: 14

Edited By sweep  Moderator

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. 

Avatar image for lordandrew
LordAndrew

14609

Forum Posts

98305

Wiki Points

0

Followers

Reviews: 0

User Lists: 36

Edited 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.
Avatar image for sweep
sweep

10887

Forum Posts

3660

Wiki Points

0

Followers

Reviews: 4

User Lists: 14

Edited By sweep  Moderator
@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.
Avatar image for benpack
benpack

3926

Forum Posts

7030

Wiki Points

0

Followers

Reviews: 4

User Lists: 14

Edited By benpack

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

Avatar image for x19
X19

2370

Forum Posts

39

Wiki Points

0

Followers

Reviews: 0

User Lists: 3

Edited By X19
@gpbmike: Is this just for subscribers or will it become available for everyone?
Avatar image for azteck
Azteck

7415

Forum Posts

5

Wiki Points

0

Followers

Reviews: 0

User Lists: 2

Edited By Azteck

So is this purely subscriber stuff or what?