Lightbox Ultimate – Video not playing on iPad

[mangonyc]

I just purchased the Lightbox plugin a few days ago, so I’m assuming i have the latest version.

I have used it to place some video on my site- but when I view it on my iPad, it says I need Flash- the file it is linking to is a .mov file, and if I go to the file directly on the ipad it plays fine.

I’m using the “MOV Video Lightbox Overlay Popup” method

and my link is as follows:

[wp_lightbox_flowplayer_video link=”http://www.christophermelvin.com/wpblogstuff/wp-content/uploads/2012/01/PinkMainDVD.mov” width=”654″ height=”480″ source=”http://www.christophermelvin.com/wpblogstuff/wp-content/uploads/2012/01/pinkDVD_thumb.jpg”%5D

you can view the page here, I have multiple videos on this page, but this will take you directly to a section that has video.

http://www.christophermelvin.com/portfolio/#dvds

It works fine on a computer with Flash installed, but not on the iPad.

Appreciate any help you can provide, I do have the HTML5 and the flowplayer enabled, so not sure what the issue is.

Thank you

[wpCommerce]

Hi, Any flowplayer video is run by flash. So when you are viewing it on iPad it’s trying to use flash (which is not possible on iPad). You can do a trick here. Try encoding your video using a H264 encoder and use the following shortcode (basically we are just trying to see if iPad can play your mov video using HTML5 player) –

[wp_lightbox_anchor_text_html5_video link="http://www.christophermelvin.com/wpblogstuff/wp-content/uploads/2012/01/H264-encoded-video.mov" width="640"

height="480" text="Click here to open the video with HTML5"]

Let me know if it runs on ipad.

Note: This post might help you get a suitable H264 encoder –

https://support.tipsandtricks-hq.com/forums/topic/mp4-video-plays-only-audio-video-is-black

[mangonyc]

Thanks very much- that worked great. The videos were already encoded with H264, so i just changed the link to what you sent me and it worked fine on the iPad.

Thanks for the help.

[wpCommerce]

You’re welcome. I’m glad that it worked for you. We also have a shortcode which is compatible with all the major browsers (including iPad, iPhone). For more info please have a look at the shortcode reference guide (MP4 Video Display section)-

http://www.tipsandtricks-hq.com/wp-affiliate-link-manager/wp-content/uploads/wp-lightbox-stuff/docs/wp-lightbox-ultimate-shortcodes-by-library-type.pdf

[davecerebral]

I am having a similar problem as described above. My video is encoded as a H.264 Baseline 1.0 MP4, yet the shortcodes for both the HTML5 Overlay Display and the MP4 Video Display will not work on my iPad or iPhone. I continue to get the lightbox with a video container showing the play button with a diagonal line through it.

Videos are working fine across web browsers (Firefox, Chrome, Safari)

Additionally, I tested the site in the previous poster in this thread, and the I am having the same issue with those videos on my iPad and iPhone as well.

Appreciate any help you can provide. Thanks

[davecerebral]

Forgot to post site info: http://www.cerebral.tv

Using following shortcodes:

[wp_lightbox_html5_video link=”http://www.cerebral.tv/wp-content/themes/twentyten/videos/nascar_base.mp4″ width=”640″ height=”360″ source=”http://www.cerebral.tv/wp-content/themes/twentyten/images/work/nascar.png”%5D

[wp_lightbox_mp4_video link=”http://www.cerebral.tv/wp-content/themes/twentyten/videos/huffy_base.mp4″ width=”640″ height=”360″ source=”http://www.cerebral.tv/wp-content/themes/twentyten/images/work/huffy.png” title=”Huffy – Cars”]

[wpCommerce]

Hi, I believe your video has encoding issue. Did you encode it right?

There is an easy way to find out if your video is properly encoded. Simply uncheck the two libraries – “HTML5 Settings” and “HTML Overlay Related Settings” from the Lightbox Ultimate Library Settings.

Now create a new page/post and directly embed the video using HTML5. For example –

<video width="320" height="240" controls="controls">

<source src="http://www.cerebral.tv/wp-content/themes/twentyten/videos/nascar_base.mp4" type="video/mp4" />

</video>

View the page and see if you can play the video on ipad. If it doesn’t work then you know that your video needs to be properly encoded.

[ainsophaur]

I’m having this same issue. It didn’t work on my iPad 2 using your shortcodes to your video. I’m positive the video is properly encoded bc I can get it to play when I link directly to it. The Lightbox displays properly. I’m just getting the Play button with the X through it.

Thanks for your help.

[wpCommerce]

Hi, have you encoded the video with any H264 encoder?

Please share the link to the page where you are having this issue.

[ainsophaur]

http://www.damienleveck.com/lightbox-test

Password: test

video login/password: ricrac/ricrac

Here’s where I’m at:

On the linked page above, the “flowplayer video” and the “mp4 video” play fine in Safari 5.1.5 and Safari 6. The “iPad test from forum” which is the HTML 5 shortcode, does not play in 5.1.5 or in Safari 6. They all play fine in Chrome 21.0.1180.89.

All 3 play fine in Safari on the iPhone.

None of them play on the iPad 2.

Your help with this is greatly appreciated.

Regards,

Damien

[ainsophaur]

Oh, and the video was encoded with Adobe Media Encoder. When you link to the file itself, it plays fine on the iPad. Safari 5-6 has trouble playing the Quicktimes ironically, which is why I wanted Flowplayer. Flowplayer solves that problem.

[wpCommerce]

Hi, After the 14.0.1 release Firefox now shows error for using HTML5 compatible “video” embed code, which is why we don’t recommend anyone to use the HTML5 shortcode anymore. I think it’s better if you just use the flowplayer shortcode or the “All browser compatible” shortcode for now (both of them are iOS compatible).

I have tried your video on four major browsers (Firefox, Chrome, Safari, IE). I haven’t seen any issue. However, I couldn’t play your video on iPad. I have also manually embedded one of your videos (The one you are using under the title “Flowplayer video”) on my test site using the HTML5 video tag (without any player). For example:

<video width="320" height="240" controls="controls">

<source src="http://www.example.com/yourvideo.mp4" type="video/mp4" />

</video>

It displayed the same behaviour. So I believe it’s not the player. iPad just can’t play the video.

I think if you just encode the vidoe to H264 format it will be playable.

[ainsophaur]

Okay, I re-encoded it. It played on the iPad before when I linked directly to the file. The re-encoded version also plays on the iPad when I link directly to the file.

However, it does not play in Flowplayer on the iPad. It plays everywhere else with the following 2 shortcodes:

[wp_lightbox_flowplayer_anchor_text_video link=”your video.mp4″ width=”854″ height=”480″ text=”Click here to open the video”]

and

[wp_lightbox_anchor_text_mp4_video link=”your video.mp4″ width=”854″ height=”480″ text=”Click here to open the video”]

There’s gotta be something with the player that’s not getting along with the iPad browser.

Please help. Thanks.

[wpCommerce]

Can you please share the link where you have embedded the encoded video?

[ainsophaur]

http://www.damienleveck.com/test/Tartaglia_v1_0912_ipadtest.mp4

[Author]

Posts