>我有一个网站,让我的用户加载视频。我有一个简单的文件输入表单。由于用户都是移动或平板电脑用户,因此手机或平板电脑会提示他们(通过浏览器(录制将用作输入的视频。
<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>
这通常没有问题。但有一个例外。
由于用户使用不同的浏览器和设备,我得到一些用户上传文件类型的视频视频/mp4文件,但其他用户上传视频/quicktime视频。
在某些视频/快速视频的情况下会出现此问题。
如果用户使用的是iPhone或iPad,并且他使用的是Safari浏览器,则在视频上传到服务器后,他将无法查看视频。 因此,如果用户使用的是带有Safari的iPad,则可以上传他正在录制的视频。该快速视频将显示在预览中。但是当他浏览想要播放该视频的页面时,视频不会显示。 如果从非iPhone或iPad的设备观看已上传到服务器的相同Quicktime视频,则可以毫无问题地查看该视频。另外,如果我尝试从iPad或iPhone查看quicktime视频,但我使用Chrome,我可以查看视频。
我读过其他有类似问题的问题,这些问题表明在 html 视频标签中使用 playsinline 参数,但没有成功。我尝试了其他选项,但没有变化。
我的网站是一个wordpress网站。我尝试下载在iPad上录制的quicktime视频,并将其直接上传到我的网站服务器。然后,我尝试从媒体的wordpress管理面板中查看视频,但Wordpress没有显示视频。
关于该怎么做,以便我可以让iPhone和iPad用户录制视频并让他们在存储在我的服务器上后能够看到它们的任何想法?
发现是导致问题的插件。超级渐进式Web应用程序插件在使用其服务工作者的方式上与Safari产生了冲突。问题尚未解决。
https://wordpress.org/support/topic/it-will-cause-issue-media-error-formats-not-supported-or-sources/