【发布时间】：2020-09-30 11:32:23
【问题描述】：
我有一个网站，可以让我的用户加载视频。我有一个简单的文件输入表单。由于用户都是手机或平板电脑用户，因此手机或平板电脑会提示他们（通过浏览器）录制将用作输入的视频。
<input type="file" id="ikid-foto" name="ikid-foto" accept="image/*,video/mp4">
然后我允许他们预览视频：
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();
然后我使用 jQuery.ajax 将视频文件存储在服务器上。在另一个页面上，我让用户查看他之前在网站中加载的视频，只需将视频的 url 作为源放到 htm 视频 html 标记中即可。
<video width="300" height="225" src="<?php echo wp_get_attachment_url($foto);?>" controls playsinline type="video/mp4"></video>
这通常没有问题。但是有一个例外。
由于用户使用不同的浏览器和设备，我发现一些用户上传文件类型为 video/mp4 文件的视频，而其他用户则上传视频/quicktime 视频。
在某些视频/快速视频的情况下会出现此问题。
如果用户使用的是 iPhone 或 iPad，并且他使用的是 Safari 浏览器，则一旦将视频上传到服务器，他将无法查看这些视频。 因此，如果用户在带有 Safari 的 iPad 上，他可以上传他正在录制的视频。该快速视频将显示在预览中。但是，当他浏览想要播放该视频的页面时，该视频未显示。 如果从不是 iPhone 或 iPad 的设备上查看已上传到服务器的相同 quicktime 视频，则可以毫无问题地查看。此外，如果我尝试从 iPad 或 iPhone 观看 quicktime 视频，但我改用 Chrome，我可以观看视频。
我已阅读其他类似问题的问题，这些问题表明在 html 视频标签中使用 playinline 参数，但没有成功。我尝试了其他选项，但没有任何变化。
我的网站是一个 wordpress 网站。我尝试下载在 iPad 上录制的 quicktime 视频，并直接将其上传到我的网站服务器。然后我尝试从 wordpress 媒体管理面板查看视频，但 Wordpress 没有显示视频。
有什么想法可以让 iPhone 和 iPad 用户录制视频并让他们在存储在我的服务器上后能够看到它们吗？
【问题讨论】：
-
这里有同样的问题，但它与插件无关。使用 HTML5 输入 type="file" 捕获的任何 Safari iOS 视频都不会在用户自己的浏览器上播放
标签： ios video safari quicktime