当我在 iOS 中安装 PWA 时，我的 HTML5 视频播放器不工作

Question

你好，我制作了一个播放随机视频的 PWA。它在 Android 或 PC 中运行良好，在 Safari 中几乎完美运行，但是当我在 iOS 中安装该应用程序时，我的 HTML5 视频播放器无法加载视频。它在 2 天前工作，从那时起没有什么大的改变，但今天它不工作了。也因为我没有任何 MacOS 设备来运行模拟器，所以我无法调试它。我在 GitHub 中打开了源代码，你知道这是怎么回事吗？

视频源我也是用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");
};

这段代码只会将 crossorigin 属性添加到 iOS 中的 video 元素。当您使用该代码时，它也适用于 PWA。

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

当我在 iOS 中安装 PWA 时，我的 HTML5 视频播放器不工作

My HTML5 Video Player is not working when I install PWA in iOS

html

javascript

html5-video

ios

progressive-web-apps