HTML5 streaming on Gamersyde

BlimBlim
Wednesday, August 7, 2013 | 2:06 PM
58 comments

Gamersyde

You may have noticed that a few days ago we switched to a new Stream player using HTML5, allowing phones and tablets to finally play videos directly on the site. For most people it seems like the switch was totally painless, but a few seem to have issues so I've just added the ability to switch back to the old Flash based player, at least while it's still supported by our partner Minoto. Please let us know in the comments if the HTML5 player works fine for you, or if you are switching back!
Update: Firefox users will be happy to know that the latest version (23) of the browser now supports hardware acceleration (DXVA) of of H.264 HTML5 videos. The results on my PC at least with our 60 fps videos are quite spectacular :)

Exoskeletor

Commented on 2013-08-03 10:39:15

workis fine here on chrome

In reply to

SplitTongue

Commented on 2013-08-03 10:43:23

What struck me the most is that the new player seems to be A LOT more CPU/GPU taxing than the old player when switching to Fullscreen (choppy framerate). I only run a weaksauce PC with onboard GPU but still, fullscreen with the old player seemed much more fluid, so this is very much appreciated.

In reply to

CEZARR

Commented on 2013-08-03 10:54:12

Work well on my phone

In reply to

BlimBlim

Commented on 2013-08-03 10:55:34 In reply to SplitTongue

Posted by SplitTongue

Looks like you html5 video is not accelerated. Can you try another browser and see if you get the same result?

In reply to

SplitTongue

Commented on 2013-08-03 11:17:52

Just tried with an updated version of Chrome -> even worse than FF
I'll update my GPU drivers to see if this fixes the problem.

In reply to

BlimBlim

Commented on 2013-08-03 12:11:47

Thanks, let us know.

In reply to

SplitTongue

Commented on 2013-08-03 12:12:40

Nope. Seems to be none of that, seems to be that dinosaur i'm trying to run this on. No problem, i can deal with it.

In reply to

Cratosch

Commented on 2013-08-03 12:32:12

Works great for me (Firefox 22). Higher Quality Option would be nice though.

In reply to

KORNdog

Commented on 2013-08-03 13:23:49

Works fine for me at work (latest version of firefox) on my surface pro (latest version of IE) and works great on my ipad2 with safari. Nothing wrong with it at my end, much better then the last.

In reply to

BlimBlim

Commented on 2013-08-03 13:44:32 In reply to Cratosch

Posted by Cratosch

Works great for me (Firefox 22). Higher Quality Option would be nice though.

I hear you. We are already using a higher bitrate than YouTube for 960x540 resolution. Going 720p would require a much higher bitrate that quite a few devices would choke on, not even mentioning our bandwidth bill...
Still we are thinking about it.

In reply to

GameSiders

Commented on 2013-08-03 14:00:30

This New One is Great for me .( Chrome 28 ) better then the last .

In reply to

b0vril

Commented on 2013-08-03 14:53:53

yea, defiantly a higher quality option would be nice. As at full screen it's just too low-res, I often just use youtube instead.

In reply to

digi_matrix

Commented on 2013-08-03 16:36:39

The best website for videogame footage just keeps on getting better.

In reply to

Archaos

Commented on 2013-08-03 16:45:10

Works great. Tried it on my Galaxy Nexus (default browser), Nexus 7 (Firefox was choppy but Chrome was good) and Desktop (Firefox) works well too.

Good stuff!

In reply to

Punkster

Commented on 2013-08-03 17:27:41

all is well on my ipad and vita and they were able to playback the videos with no problem. :)

In reply to

hotkirby

Commented on 2013-08-03 20:37:14

Works great, almost Vimeo quality :)

In reply to

asdfg

Commented on 2013-08-03 20:42:50

Tried streaming some AC:Black Flag, was lagging a lot. Tried it again today with the Saints Row-vid and now it works great! :)

In reply to

EzioAltair

Commented on 2013-08-03 21:41:56

yep great quality, no bugs
windows 8, firefox 22.0

In reply to

Trebby

Commented on 2013-08-03 21:56:26

Works flawless here Chrome 28.0.1500.95 m and on my iPhone 4S using Chrome.

In reply to

alibecks

Commented on 2013-08-03 22:09:41

it works well. keep going

In reply to

archnophobia

Commented on 2013-08-03 23:03:51

works good without lag or bugs but the video image is not clear, not good as the old one...

In reply to

BlimBlim

Commented on 2013-08-03 23:36:10 In reply to archnophobia

Posted by archnophobia

works good without lag or bugs but the video image is not clear, not good as the old one...

It's the exact same quality, the encoding system hasn't been changed at all

In reply to

userxyz

Commented on 2013-08-04 01:56:46 In reply to BlimBlim

Posted by BlimBlim

It's the exact same quality, the encoding system hasn't been changed at all

That is unfortunate.

Here are some suggestions for some changes to the encoding system then (regarding the streaming videos):

Please always use the latest x264 revision. At the moment you are not using the latest revision.

Please use x264 presets. Please use at least "Preset Slow". At the moment you are not using presets.

For the streaming videos and their associated bandwidth constraints it also might be better not to use x264 tunes (i.e. use the default tune).

Also, please use VBV with x264. At the moment you are not using VBV at all, although VBV is very important for streaming purposes.

You can read about VBV and streaming over there (especially see "Example 3"):

http://mewiki.project357.com/wiki/X264_Encoding_Su...

Also, please use CRF (Constant Rate Factor) encoding. At the moment you are using ABR (Average Bit Rate), which is suboptimal. CRF combined with VBV is better and can save bandwith. For streaming purposes, CRF values somewhere between 21 and 16 should probably be reasonable. But try for yourself and see at what CRF value the quality becomes good enough for you.

Furthermore, please use the MP4 "Fast Start" feature when muxing to MP4 container (known as "Web Optimized" option in HandBrake GUI / --optimize option in HandBrake CLI for example).

And, as already mentioned earlier, please increase the video resolution. 960x540 is too low. Please use at least 1280x720p or even 1920x1080p.

PS: Not sure what AAC encoder you are currently using for the streaming videos, as this is unapparent from the corresponding MediaInfo output. But please make sure to use a good AAC-LC encoder, which is important at a bitrate of just 96 Kbps (which is what you are currently using).

PPS: Some time earlier you said that your streaming videos are automatically generated / (re-)encoded by your server, correct? And the source videos the server gets fed with are the full-bitrate H.264+AAC MP4 videos you are currently encoding with MeGUI, correct?

If yes, then you should be able to let your server auto-encode / auto-generate the streaming videos via HandBrake.

HandBrake currently does not support AviSynth as input. But in that case it doesn't need to because you would be feeding it with the full-bitrate MP4 videos you created via MeGUI in the first place ;).

And HandBrake is not just a x264 GUI, but a whole library which should have all the capabilites you need for that task (including things like altering the resolution of videos (if needed) and so on).

And HandBrake is also available as a CLI version.

GUI:

http://handbrake.fr/downloads.php

CLI:

http://handbrake.fr/downloads2.php

Nightly builds:

http://handbrake.fr/nightly.php

CLI Guide:

https://trac.handbrake.fr/wiki/CLIGuide

In reply to

[quote=BlimBlim]
It's the exact same quality, the encoding system hasn't been changed at all :-)[/quote]

That is unfortunate.

Here are some suggestions for some changes to the encoding system then (regarding the streaming videos):

Please always use the latest x264 revision. At the moment you are not using the latest revision.

Please use x264 presets. Please use at least "Preset Slow". At the moment you are not using presets.

For the streaming videos and their associated bandwidth constraints it also might be better not to use x264 tunes (i.e. use the default tune).

Also, please use VBV with x264. At the moment you are not using VBV at all, although VBV is very important for streaming purposes.

You can read about VBV and streaming over there (especially see "Example 3"):

http://mewiki.project357.com/wiki/X264_Encoding_Suggestions#VBV_Encoding

Also, please use CRF (Constant Rate Factor) encoding. At the moment you are using ABR (Average Bit Rate), which is suboptimal. CRF combined with VBV is better and can save bandwith. For streaming purposes, CRF values somewhere between 21 and 16 should probably be reasonable. But try for yourself and see at what CRF value the quality becomes good enough for you.

Furthermore, please use the MP4 "Fast Start" feature when muxing to MP4 container (known as "Web Optimized" option in HandBrake GUI / --optimize option in HandBrake CLI for example).

And, as already mentioned earlier, please increase the video resolution. 960x540 is too low. Please use at least 1280x720p or even 1920x1080p.

PS: Not sure what AAC encoder you are currently using for the streaming videos, as this is unapparent from the corresponding MediaInfo output. But please make sure to use a good AAC-LC encoder, which is important at a bitrate of just 96 Kbps (which is what you are currently using).

PPS: Some time earlier you said that your streaming videos are automatically generated / (re-)encoded by your server, correct? And the source videos the server gets fed with are the full-bitrate H.264+AAC MP4 videos you are currently encoding with MeGUI, correct?

If yes, then you should be able to let your server auto-encode / auto-generate the streaming videos via HandBrake.

HandBrake currently does not support AviSynth as input. But in that case it doesn't need to because you would be feeding it with the full-bitrate MP4 videos you created via MeGUI in the first place ;).

And HandBrake is not just a x264 GUI, but a whole library which should have all the capabilites you need for that task (including things like altering the resolution of videos (if needed) and so on).

And HandBrake is also available as a CLI version.

GUI:

http://handbrake.fr/downloads.php

CLI:

http://handbrake.fr/downloads2.php

Nightly builds:

http://handbrake.fr/nightly.php

CLI Guide:

https://trac.handbrake.fr/wiki/CLIGuide

userxyz

Commented on 2013-08-04 02:25:29

PS:

Oh, and for the sake of device compatibility (decoding performance), please don't forget to restrict the H.264 Level appropriately.

In reply to

Nimlot

Commented on 2013-08-04 02:45:40

Latest firefox works nicely

In reply to

What's up?

Members
Announcements

Loakum *takes a sip of grape juice* The Great Awakening is happening…. (10 Weeks ago)
gigantor21 We getting any Tekken 8 demo footage? (> 3 Months ago)
dc_coder_84 Playing Half-Life 1 with ray tracing mod on Linux, yay ;) (> 3 Months ago)
nostradamus MS-Bethesda-ABK does have some ring to it. My oh my, (> 3 Months ago)
Loakum Sony’s PlayStation Showcase was weaksauce….except for 5 great upcoming games. (> 3 Months ago)
Loakum *takes a sip of grape juice* Ah…such a good vintage. (> 3 Months ago)
nostradamus @dc_coder_84: [url] (> 3 Months ago)

Driftwood Download is now functional again on Gamersyde. Sorry for the past 53 days or so when it wasn't. (> 3 Months ago)
Driftwood Another (French) livestream today at 2:30 CEST but you're welcome to drop by and speak English. I will gladly answer in English when I get a chance to catch a breath. :) (> 3 Months ago)
Driftwood GSY is getting some nice content at 3 pm CEST with our July podcast and some videos of the Deus Ex Mankind Divided preview build. :) (> 3 Months ago)
Driftwood For once we'll be live at 4:30 pm CEST. Blim should not even be tired! (> 3 Months ago)
Driftwood More Quantum Break coverage coming in a few hours, 9:00 a.m CEST. (> 3 Months ago)
Driftwood We'll have a full review up for Firewatch at 7 pm CET. Videos will only be tomorrow though. (> 3 Months ago)
Driftwood Tonight's livestream will be at 9:15 GMT+1, not GMT+2 as first stated. (> 3 Months ago)

HTML5 streaming on Gamersyde

All comments (58)

TopSpin 2K25

Stellar Blade

Senua's Saga: Hellblade II

Our PC videos of Ereban: Shadow Legacy

Kingdom Come: Deliverance II announced

Our PC video of Between Horizons