Encoding videos for HTML5 <video> playback

MrX · 2012-10-12, 02:04 AM

First of all, does anyone else even use html5 video playback? Most sponsors seem to still use Flash (with either .flv or .mp4 files), although I noticed a sponsor FHG using html5 <video> tags the other day. I guess I decided to use html5 on my sites because I'm very inexperienced, just starting to go heavy on the video, and read some nice-sounding stuff about standards compliance and browser compatibility with html5 video tags.

This is only my second time posting here, but you all seem friendly and thought I would throw out this question. Any help would be greatly appreciated.

1. I use Handbrake(x264 encoder) to encode my .mp4s and am slowly coming to understand the tradeoff between video quality/manipulation and browser compatibility. I'm leaning toward just using the "Universal" settings at this point, as I've had a lot of trouble getting html5 playback with .mp4s in Internet Explorer. Does this resonate with anyone else's experience? I'm not too concerned with mobile and device playback since I do mostly HD videos which I believe are intrinsically incompatible ("not optimized for") with mobile. All I want is .mp4s which play via HTML5 embedding (using jsplayer or a related wordpress plugin) in all the major browsers. That is, until I just decide to scrap all this and revert to a flash player.

2. Can anyone recommend a good ogg/.ogv encoder? I've triend Miro, something by Xilisoft, and another one, and all have a low success rate (encoding fails for various reasons). The other encoders I trust (adobe media encoder, sorenson squeeze) don't have theora/ogg capability.

3. Is there really a need for .webm in addition to .mp4 and .ogg? I think this fills a small compatibility gap, but is this gap antiquated yet?

4. Am I foolish for doing this double/triple encoding and troubleshooting for html5 video playback? Is there any redeeming benefit (e.g. quality, accessibility) over Flash which justifies this hassle?

Any kind of help, insights, feedback etc... is greatly appreciated. Thanks so much for your time.
Jeff

Greenguy · 2012-10-12, 07:29 AM

Not sure if this will help, but since I do use some HTML5 tags, anytime I need info, I go here:
http://www.w3schools.com/html/html5_intro.asp

Cleo · 2012-10-12, 07:34 AM

I encode videos mp4/h.264 and using Episode.

Then I use JWPlayer which is Flash for those that have and htm5 (like mobile devices) for those that don't.

Like the video on this page.

DiGiT · 2012-10-12, 09:24 AM

Freemake Video Converter can output all things needed for clean HTML5 Video:
http://www.freemake.com/how_to/how_t...ed_html5_video

MrX · 2012-10-13, 05:34 PM

Thanks everybody.

Greenie - Good call on the html5 w3 resource. Don't know if I have time to explore it right now, but should definitely make time soon to get up on that stuff.

Cleo, interesting that your player resorts to html5 as backup. The wordpress plugins I use (based on jsplayer) are all configured to play html5 first, and fall back to flash if the browser/device can't play html5. You raise an important point though - a single .mp4 file encoded with h.264 plays in both modern flash players as well as html5 players in many, but not all, browsers. So a setup like you describe, or simply providing an .mp4/h.264 with a flash player, would seem to be a good solution.

and DiGiT- I'll check out this Freemake product you mention. Haven't heard of it.

So to summarize my current stance, I'm leaning towards just using mp4/h264 files (presumably better quality than .flvs in flash ???) with either the jsplayer (html5) or a nice lightweight, customizable, open-source flash player I just found, called Flayr. It is working very nicely on several sites, and Google will like the fact it's only 6 or 7kb of script and style. in case anyone wants to have a look, i think the url is http://www.flayr.net. it's very simple to configure, not fancy enough for many users I'm sure, but I love the small size and PageSpeed value. Of course I can't afford any kind of commercial licenses or other expenses right now, so open source works.

2012-10-12, 02:04 AM	#1
MrX Internet! Is that thing still around? Join Date: Jun 2012 Location: Pittsburgh, PA Posts: 5	Encoding videos for HTML5 <video> playback First of all, does anyone else even use html5 video playback? Most sponsors seem to still use Flash (with either .flv or .mp4 files), although I noticed a sponsor FHG using html5 <video> tags the other day. I guess I decided to use html5 on my sites because I'm very inexperienced, just starting to go heavy on the video, and read some nice-sounding stuff about standards compliance and browser compatibility with html5 video tags. This is only my second time posting here, but you all seem friendly and thought I would throw out this question. Any help would be greatly appreciated. 1. I use Handbrake(x264 encoder) to encode my .mp4s and am slowly coming to understand the tradeoff between video quality/manipulation and browser compatibility. I'm leaning toward just using the "Universal" settings at this point, as I've had a lot of trouble getting html5 playback with .mp4s in Internet Explorer. Does this resonate with anyone else's experience? I'm not too concerned with mobile and device playback since I do mostly HD videos which I believe are intrinsically incompatible ("not optimized for") with mobile. All I want is .mp4s which play via HTML5 embedding (using jsplayer or a related wordpress plugin) in all the major browsers. That is, until I just decide to scrap all this and revert to a flash player. 2. Can anyone recommend a good ogg/.ogv encoder? I've triend Miro, something by Xilisoft, and another one, and all have a low success rate (encoding fails for various reasons). The other encoders I trust (adobe media encoder, sorenson squeeze) don't have theora/ogg capability. 3. Is there really a need for .webm in addition to .mp4 and .ogg? I think this fills a small compatibility gap, but is this gap antiquated yet? 4. Am I foolish for doing this double/triple encoding and troubleshooting for html5 video playback? Is there any redeeming benefit (e.g. quality, accessibility) over Flash which justifies this hassle? Any kind of help, insights, feedback etc... is greatly appreciated. Thanks so much for your time. Jeff

2012-10-12, 07:29 AM	#2
Greenguy The Original Greenguy (Est'd 1996) & AVN HOF Member - I Crop Pics For Thumbs In My Sleep Join Date: Feb 2003 Location: Blasdell, NY (shithole suburb south of Buffalo) Posts: 41,758	Not sure if this will help, but since I do use some HTML5 tags, anytime I need info, I go here: http://www.w3schools.com/html/html5_intro.asp __________________ Promote POV Porn Cash By Building & Submitting Galleries to the Porn Luv Network

2012-10-12, 07:34 AM	#3
Cleo Subversive filth of the hedonistic decadent West Join Date: Mar 2003 Location: Southeast Florida Posts: 27,936	I encode videos mp4/h.264 and using Episode. Then I use JWPlayer which is Flash for those that have and htm5 (like mobile devices) for those that don't. Like the video on this page. __________________ Free Rides on Uber and Lyft Uber Car: uberTzTerri Lyft Car: TZ896289

2012-10-12, 09:24 AM	#4
DiGiT Aw, Dad, you've done a lot of great things, but you're a very old man, and old people are useless Join Date: Apr 2012 Posts: 21	Freemake Video Converter can output all things needed for clean HTML5 Video: http://www.freemake.com/how_to/how_t...ed_html5_video __________________ Adult Webmaster Cash

2012-10-13, 05:34 PM	#5
MrX Internet! Is that thing still around? Join Date: Jun 2012 Location: Pittsburgh, PA Posts: 5	Thanks everybody. Greenie - Good call on the html5 w3 resource. Don't know if I have time to explore it right now, but should definitely make time soon to get up on that stuff. Cleo, interesting that your player resorts to html5 as backup. The wordpress plugins I use (based on jsplayer) are all configured to play html5 first, and fall back to flash if the browser/device can't play html5. You raise an important point though - a single .mp4 file encoded with h.264 plays in both modern flash players as well as html5 players in many, but not all, browsers. So a setup like you describe, or simply providing an .mp4/h.264 with a flash player, would seem to be a good solution. and DiGiT- I'll check out this Freemake product you mention. Haven't heard of it. So to summarize my current stance, I'm leaning towards just using mp4/h264 files (presumably better quality than .flvs in flash ???) with either the jsplayer (html5) or a nice lightweight, customizable, open-source flash player I just found, called Flayr. It is working very nicely on several sites, and Google will like the fact it's only 6 or 7kb of script and style. in case anyone wants to have a look, i think the url is http://www.flayr.net. it's very simple to configure, not fancy enough for many users I'm sure, but I love the small size and PageSpeed value. Of course I can't afford any kind of commercial licenses or other expenses right now, so open source works. __________________ HD Porn \| HD Latina Porn