Bigcommerce主横幅视频仅在IOS设备上不起作用

编程问答 2022-06-11

问题描述

这是我正在从事的bigcommerce商店的链接。它在任何浏览器上在除IOS设备之外的所有设备上显示背景视频。 https://axict.mybigcommerce.com/ 在这个奇怪的问题上寻求帮助。 预先感谢。

Here is the video element code,<video id="bannerVideo" class="bgVideovideo" autoplay loop muted playsinline>
    <source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.webm" 
          type='video/webm;codecs="vp8,vorbis"' />
    <source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.mp4" 
          type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"' />
  Your browser does not support the video tag.
</video>

解决方法

通过快速检查，这实际上在MacOS上的Safari上也不起作用，而在同一Mac上的Chrome上也行。

查看网络流量，您可以看到服务器以200响应浏览器对视频的字节范围请求，尽管Chrome可以做到，但Safari不能很好地处理该请求：

enter image description here

此问题的最常见根本原因似乎是未配置为以Safari认为正确的方式处理范围请求的服务器。当它发送一个字节范围的请求时，它期望看到一个“ 206”响应。

答案中有更多讨论和示例：https://stackoverflow.com/a/32998689/334402

,

好像您已将视频上传到WebDAV-就像Mick的回答一样，BigCommerce WebDAV使用的文件托管服务器未配置为在加载{{1}时发送IOS / Safari正在寻找的正确请求类型}元素的来源。

遇到此问题时，我不得不将视频上传到AWS S3 Storage。您应该可以永久免费获得5GB的存储空间。

bigcommercehtml5-video