javascript - 在iOS中安装PWA时，我的HTML5视频播放器无法正常工作

Question

您好，我制作了一个播放随机视频的PWA。它可以在Android或PC上完美运行，而在Safari中则几乎完美，但是当我在iOS中安装该应用程序时，我的HTML5视频播放器无法加载视频。它在2天前可以正常工作，自那时以来没有什么大的变化，但今天却无法正常工作。另外，由于我没有任何MacOS设备可运行模拟器，因此无法调试它。我在GitHub上打开了源代码，您知道这是什么意思吗？

如果与JS有关，我还提供了JS的视频源。

document.getElementById("vsrc").src = srcRaw + videoid + ".mp4";
document.getElementById("videoEl").load();

GitHub代码:https://github.com/ondersumer07/vinematik

网站本身:https://ondersumer07.github.io/vinematik/

Answer 1

经过长时间的研究，我发现了。您需要做的是将crossorigin属性添加到HTML5 video元素中。但是它只需要在iOS中使用，否则它将破坏您在Android或Web上的视频播放器。

为此，您需要使用一些javascript:

// Detect iOS and if it is, add the crossorigin to the video player so that it is working as expected
  if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1){
    document.getElementById("videoEl").setAttribute("crossorigin", "true");
};

这段代码仅在iOS中将crossorigin属性添加到video元素。而且，当您使用该代码时，它也可以在PWA中使用。

这就是我解决问题的方式。