I have this module installed and working on every desktop OS / Browser combination. But when playing back on iPad I get a IOS playback icon with a line through it and an endless looping video-js loading animation.

Something looks odd with the VIDEO tag when I inspect the page source:

<video id="videojs-766-field-video-video_html5_api" data-setup="{}" class="vjs-tech" autoplay="" preload="none" src="https://server.com/video.mp4">
  <source src="https://server.com/video.mp4" type="video/mp4">
  <source src="https://server.com/video.webm" type="video/webm">
</video>

NOTE: removed server and file names above.

It seems strange the src is in both the main video tag and the nested source tags.

I know its not the actual video files as I downloaded the video from video.js website and tested with that movie with the same results.

More info:

1. I am using link fields.
2. I tried with the CDN version of video-js (V4.0) and downloaded the latest 4.3 using Libraries...same result.

I have found others that have had issues with iPad playback and video-js but they all were related to improperly encoded video. I am using MP4, H264, Baseline, Level 3.0, Fast Start. The video plays back native in the IOS browser just fine.

Has anyone else used the 7.x-3.x-dev version and tried to play a video on IOS?

Thanks!

Comments

JonWicks25’s picture

Just joined to let you know. Had exactly the same problem and spent the last 3 hours trying to fix it.. eventually I did.

Worked fine on an iPhone 5 but iPad or older than iPhone 5 refused to play at all. The problem turned out to be the dimensions of the actual video file. From what i found out if the video is bigger than 640x360 some devices flat out refuse to play the video.

SO i re-sized the video, some programs didn't like resizing the video and had lots of errors in the end used handbrake (http://handbrake.fr/) which is free and re-sized to 620x348 (original size was 1920x1080) can adjust in handbrake clicking the picture settings icon. After that all seems to be working perfectly across all devices.

Hope this works for you

Oh just incase you want the other settings i used:

Format: Mp4
Video Codec: H.264 (x264)
x264 Tune: none
H.264 profile: Baseline
H.264 Level: 4.1
Variable Framerate

Let me know if it works :)

rbennion’s picture

I found the issue.

It has nothing to do with this wonderful module.

I am hosting the videos in an AWS S3 bucket.

I have a bucket policy that only allows people to view the video if the http referrer is the domain of our website.

IOS 6.0 and later, do not provide http referrer information using Safari. So AWS S3 does not know where the request is coming from and it is denying access to the videos.

Turned off the bucket policy, made the videos public, and it worked perfect.

Unfortunately, this is not going to work as the files must be protected.

rbennion’s picture

Status: Active » Closed (works as designed)