使用 iPhone 或 iPad 无法在 Safari 上播放 Quicktime 视频

Question

I have a website that let's my users load videos. I have a simple file input form. Since users are all mobile or tablet users the phone or tablet prompts them (via the browser) to record a video that will be used as the input.

<input type="file" id="ikid-foto" name="ikid-foto" accept="image/*,video/mp4">

I then allow them to preview the video:

var fileItem = document.getElementById('ikid-foto');
var files = fileItem.files;
var file = files[0];
var url = URL.createObjectURL(file);
var video = document.getElementsByTagName('video')[0];
video.src = url;
video.load();

I then use jQuery.ajax to store the video file on the server. On another page I let the user view the video he has previously loaded in the site, this is simply done by putting the url of the video as source to an htm video html tag.

<video width="300" height="225" src="<?php echo wp_get_attachment_url($foto);?>" controls playsinline type="video/mp4"></video>

This usually works with no issues. But there is an exception.

Since users use different browsers and devices I get some users that upload videos with file type video/mp4 files, but other upload video/quicktime videos.

The problem occurs on some cases of video/quicktime videos.

If the user is on an iPhone or iPad and he is using a Safari browser he is unable to view the videos once they have been uploaded to the server. So, if the user is on an iPad with Safari he can upload the video he is recording. That quicktime video will be shown on the preview. But when he browses a page that want to play that video the video is not shown. If that same quicktime video that has been uploaded to the server is viewed from a device that is not an iPhone or an iPad it can be viewed with no issues. Also, if the I try to view the quicktime video from an iPad or iPhone but I use Chrome instead, I CAN view the video.

I have read other questions with similar problems that indicate to use the playsinline parameter in the html video tag, but with no success. I've tried other options and no change.

My website is a wordpress site. I tried to download the quicktime video that was recorded on an iPad and directly upload it to my web site server. I then tried to see the video from the wordpress admin panel for media and Wordpress does not show the video.

Any thoughts on what to do so I can have iPhone and iPad users record videos and have them be able to see them later after storing on my server?

Answer 1

Found out that it was a plugin causing the issue. The Super Progressive Web Apps plugin was generating a conflict with Safari in the way it used it's service worker. Issue not solved yet.

https://wordpress.org/support/topic/it-will-cause-issue-media-error-formats-not-supported-or-sources/