Embed HTML5 Video for iPad

[griffinjackson413]

Hey can you help me make it so my members can view the videos i post on their ipods and ipads the site is clonewars . tk (wiouth the space) 

[AdamGarcia9206]

Unfortunately, This went a little fast for me. I didn't quite understand what this was for. Are we trying to make the videos from YouTube and Vimeo appear on JUST the iPad & iPhone or are we trying to use this for all smartphones (I.E. - iPhone, iPad, Android, Windows, etc, etc.)?

[SeanBlader]

If you're doing this on a large site with lots of different javascripts embedded in it, please for your own sake have a programmer look at it and fix the issues with global variables, user agent detection instead of feature detection, and with document.write which is a performance killer.

[optikalefxx]

@SeanBlader I agree with most of this, but the general rule of thumb is to use feature detection instead of user agent sniffing. Not the other way around. You don't want to hinder html5 devices if they can use html5 video just because you only allow iphone and ipad.

[blimpified]

i had a client who couldn't watch my embedded video on his ipad and i know nothing about code but i fixed it within 30 seconds after watching this. you're like a magical smartdude fairy. thank you!

[optikalefxx]

@blimpified should i take offense to that? lol. thanks!

[blimpified]

thank you! i had a client who couldn't watch my embedded video on his ipad and i know nothing about code but i fixed it within 30 seconds after watching this. you're like a magical smartdude fairy. thank you!

[treksf]

Really awesome video! Thanks much!

P.S. You might want to post that top code in your description too.

[seriouslyWeird]

the user agent string looks very version specific... won't it stop working with a newer version of ipad, or an update, etc?

[draconisthe0ry]

hey man your video is really good. i'm a little new to this coding world. i'm trying to watch facebook videos on my ipad. how did you bring up the html 5 window on your computer. i'm running mac os 4.3 on my ipad.

[estelalim]

Dont work with VIMEO, how can i make it to WORK?

[optikalefxx]

@estelalim Vimeo is now html5 comparable by default.

[estelalim]

@optikalefxx I'm plus member on VIMEO, but i dont redirect users to vimeo to watch my videos, i need to embed html5 on website and i dont know how can i make it, can you help me?

[optikalefxx]

@estelalim vimeo gives you an Iframe embed code. Use that. It will be html5 on ipad and iphone, and flash for others.

Thats the best you can do - you could steal the raw mp4 file, but they can come after you for that.

[SqeakyGoldfish]

They can sometimes automatically size in some Internet browsers, but it probably wouldn't be that good.

[CommentCommenter]

Aye... 4:55 = absolute user experience fail. 

[PHILRESCUE]

Hmmm, I still have something wrong.

[optikalefxx]

@PHILRESCUE Send me your code, ill take a look.

[PHILRESCUE]

Has anyone figured out the code for getting this to work on Firefox?

[PHILRESCUE]

Has anyone figured out the code for getting this to work on Firefox?

[optikalefxx]

@PHILRESCUE you need to encode your videos in OGG format. use FireOGG or FFMPEG to do that. OR for firefox 4.0, you can encode in webM format.

[PHILRESCUE]

@optikalefxx OK, thats what I was assuming, but lets just make this clear for us idiots :) I need to convert my video file to a. .ogg file format, upload it, so the browser will now shoe the .ogg file correct?

Now, why before adding this ipad code did the firefox play the flash video but won't now?

[optikalefxx]

@PHILRESCUE Close, you need to encode it as OGG, upload the video, change your <video tag to have 2 <source tags inside. The top one being the orignal mp4 source, the next one being the OGG source. That way when firefox fails to play the mp4, it will move on to play the OGG. Doing it this way will allow iPad to still play the mp4.

[PHILRESCUE]

@optikalefxx OK, but why did the original code stop the flash from playing.  Did I right the code wrong? The original video I had is still there as a flash.

[optikalefxx]

@PHILRESCUE Yea, if you did it correctly then the flash would still play. Test your document.write("") to make sure your detection and IF statement is correct.

[PHILRESCUE]

Has anyone figured out the code for gettingn this to work on Firefox?

[WHATTHEFUTURE]

Hi,

This is really helpful. Can you give advice on doing this for TED.com videos. I want to embed these on my blog somnetimes and have Iphone, Ipad people be able to see them. Any ideas?

[mikehaydon3]

Worked like a charm for me! Thanks so much!

[depriestonline]

have you had any luck getting the code to work for ANDROID / Skyfire /Browser? I have purchased the Chinese knock off of the iPad called the aPad, running Android 1.5

I need to recode my sites to work on this thing...any suggestions?

[Burgerunit]

Great video man, worked perfectly. It might be worth dropping that code into the info box.

[arbitterr]

How do you make the youtube video also play in html5 in google chrome and safari?

I find it weird that through that simple code, suddenly youtube videos get shown well on iPhone's, iPods and iPads!

[optikalefxx]

@arbitterr Youtube is a partner with apple.

I'm sure mobile safari recognizes YouTube.

[arbitterr]

@optikalefxx Yesyes, with your simple code I've made it possible that in normal webbrowsers it's in flash but on my iPod it's in html. But I was wondering if you could also make it standard html for normal Safari and google chrome, perhaps using the <video> tag?

[optikalefxx]

@arbitterr totally. Use <video> tags and then inside the tags have your flash code. Basically browsers that can't use <video> will use the flash instead. I plan on a video soon of this.

[arbitterr]

@optikalefxx I don't really know where to put the video tag or what to put in it, tried some possibilities but didn't quite do the trick... But I guess I'll wait for the video!

thanks :)

[optikalefxx]

@arbitterr Basically

<video src='' type=''>

 <object blah blah>

</video>

the object bla blah is the code you get from youtube for embedding, or the code you get from any flash video for embedding video

[arbitterr]

@optikalefxx Though I still don't get what I need to put in the src'' and type'' parts of the video tag..

[optikalefxx]

@arbitterr don't worry then, ill make a video on it soon. this week.

[Martins2012]

Did you find a solution to change the resolution of YouTube HTML 5 on safari? Using the iPad? Thanks.

[optikalefxx]

@Martins2012 youtube is working on fixing it, but it has worked quite a few times as of late. I sold my iPad so i can't test it anymore.

[Martins2012]

@optikalefxx Its none of my business, but please, do tell why you sold your iPad? I'm just curious, I would only sell mine to buy the next iPad.

[optikalefxx]

@Martins2012 Gonna buy iPhone 4 with the money I got For it.

[Martins2012]

@optikalefxx Ohhhh, I thought about this too, it's a difficult decision for me, I decided to keep the iPad tethered to tmobile, because the screen on the iPhone is too small. I really think the next iPad will have camera to do that iphone4 magic. I will wait. Thanks for your reply.

[Martins2012]

If this is really all. It's not a big deal after all

[fierced1989]

optikalefxx I have a website with Justin videos embedded into it. Will this script also work for those type of videos?

[optikalefxx]

@fierced1989 what are Justin videos?

[fierced1989]

justin. tv videos, the broadcasting website.

[Jamaica4Lyphe]

is there a way to make it play automatically like a flash video would? how much u pay for ur ipad? is it gud?

[kenyontamzentfdm]

Hey nice video, the true is you can buy USA iTunes gift cards at this store  iTunesgiftScards at COM, they are legit iTunes Gift card store, they deliver to me by email, and Fast, my advise to you :)

- iTunesGiftSCards . C O M with an S after the Gift :)

[dmitrijledkov]

Hmmmm you should check if html5 is supported and use that. Cause I want to see your videos with html5 on the desktop as well =)

[optikalefxx]

@dmitrijledkov Very true. But until I make a desktop interface I'll let the flash video do their thing. The html5 controls are plain.

[qubodup]

Thanks, I was interested in the whole issue because the blog I write to (and post losts of videos) has some users who don't have flash but most likely use firefox. The "firefox only supports theora" piece of info was thus very useful to me :)

[creatiu]

Thank you @optikalefxx, finally I have downloaded Permute for Mac, I tried encoding videos by myself but I had a lot of trouble with movie size.

[creatiu]

Great video, could you please tell us what's the max video size that can be embedded in the iPad? (Safari)

[optikalefxx]

@creatiu so the ipad resolution is 1024x768 so i wouldn't make the SIZE of the video larger than that, or your letting iPad scale it down. That doesn't mean you can't make 1080p video which is 1920x1280, but the size on the website shouldn't be larger than 1024x768

[karlroeder]

Do you know how to enable a thumbnail (static image before play) with the Vimeo embed?

[abm89]

Flash should die.

[bringitbackthailand]

How do I embed this in a wordpress post?

[brettamey]

For the life of me, I cannot get this to work.

[redsxtreme]

thanks love this. your sound usually isn't this bad, but oh well. thanks!

[optikalefxx]

@redsxtreme yea, not sure what happened, I think my mic is dying

[RightWingBashers]

Why Is It That My Hulu Is Not Working? .. I Need Help

[optikalefxx]

@RightWingBashers hulu doesn't support html5 yet

[petab10]

Thanks! This is a lot of help! :)

Could you do a tutorial on a jquery slider? None of the ones I've seen explain very well.

[optikalefxx]

@petab10 By slider do you mean a thing you drag back and forth?

[qaddodi]

COOL!!!!!  <3 great vid! :)