Media files not playing on iPhone or iPad

[LMKWeb]

I’m developing a site with lots of audio and video files. They are working fine on my desktop in all major browsers. When I open the page on my iPhone in Safari, I get a constant spinning wheel at the top. The pop-ups are all working, but none of the files, mp3, Vimeo, or mp4 are playing. Here’s the URL: [http://dev.lmkwebdesign.com/charleslipper/voiceover/]

[wzp]

Similar iOS issues have been extensively discussed in the past…

• https://support.tipsandtricks-hq.com/forums/topic/wp-lightbox-ultimate-pop-up-doesnt-work-on-iphone4
• https://support.tipsandtricks-hq.com/forums/topic/amazon-cloudfront-video-wont-play-on-ios-device
• https://support.tipsandtricks-hq.com/forums/topic/unable-to-view-videos-on-mobiles
• https://support.tipsandtricks-hq.com/forums/topic/customer-trying-to-download-mp3s-on-ipad
• https://support.tipsandtricks-hq.com/forums/topic/zip-download-issue-iphoneipad-in-safari-browser

[LMKWeb]

None of those address the same issue, I did read most during my earlier search.

[LMKWeb]

Some additional detail:

I attempted troubleshooting by disabling the site plugins, switching to Twenty Fifteen, and checking the files on multiple devices. The site is running Genesis with a custom child theme, along with the following plugins:

Custom Upload Directory

Google Analytics Dashboard

Gravity Forms + MailChimp Add-on + No CAPTHCA reCAPTHCA

HTML Editor Syntax Highlighter (disabled due to incompatibility with WP 4.3)

Limit Login Attempts

Share Buttons by AddToAny

UpdraftPlus

WP Lightbox Ultimate

Yoast SEO

Here is an example of the shortcodes on the page:

MP3: [wp_lightbox_ultimate_embed_audio url=”http://dev.lmkwebdesign.com/charleslipper/wp-content/uploads/voiceover/audio/mpeg/CommercialWEB072810.mp3″ cover_image=”” width=”300″ height=”50″ title=”Commercial Demo” autoplay=”false” direct_embed=”” anchor_type=”text” text=”Commercial Demo” source=””]

Vimeo: [wp_lightbox_prettyPhoto_anchor_text_video link=”http://vimeo.com/77166262″ text=”ACTFL – Lead with Languages” description=”ACTFL – Lead with Languages” width=”640″ height=”360″]

MP4: [wp_lightbox_anchor_text_mp4_video link=”http://dev.lmkwebdesign.com/charleslipper/wp-content/uploads/voiceover/video/mp4/Volkswagen.mp4″ text=”Volkswagon – All New 2011 Jetta Tour (10.3 MB)” autoplay=”false” width=”640″ height=”360″]

[wpCommerce]

@LMKWeb, What version of iPhone are you using?

[LMKWeb]

Sorry I missed this response. But I actually got this resolved by turning off jquery in the settings. I went through and toggled items one at a time and that one worked.

However, now I’ve run into almost the opposite issue on a different page – I have three videos that are playing audio only on desktop with a blank video, but the video and audio both work on my phone. Also on that page is one video that works on either platform, so I don’t image it’s a scripting conflict this time. All are MP4s; here’s the page in question: [http://dev.lmkwebdesign.com/charleslipper/productions/]

Any ideas? Video is not my forte, so I’m uncertain the best way to troubleshoot the problems.

[wzp]

Are you using H264 encoding for the videos? The encoding of the video needs to be correct so it can play on all devices:

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

[LMKWeb]

I actually have no idea, I didn’t create the videos. I’ll check with my client, thanks!

[wzp]

The open source VLC media player, under Tools –> Media Information, will tell you how a video was encoded.

[http://www.videolan.org]

[LMKWeb]

Changing the encoding worked, thank you!

[Author]

Posts