如果 iPhone 水平转动，HTML5 视频将不会显示

如何解决如果 iPhone 水平转动，HTML5 视频将不会显示

我正在使用 HTML5 代码在我的网站上显示视频，它在台式电脑和非“苹果”手机上都能完美运行，但在 Iphone 上，它表现得很奇怪。

视频的 HTML 代码。所以基本上我有 2 个视频，一个用于桌面，一个用于移动，移动设备设置为在桌面上不显示，而在移动设备上则相反。

<section class="video">
  <video class="video-fluid" controls playsinline width="100%" >
  <source id="dekstop_video" src="/wp-content/themes/savoy-child/Video/onas_video.mp4" type="video/mp4" />
  </video>
  <video class="video-fluid" controls="true" playsinline preload="Metadata" width="100%" >
  <source id="mobile_video" src="/wp-content/themes/savoy-child/Video/onas_mobilna.mp4" type="video/mp4" />
  </video>
</section>

现在让我解释一下视频在 iphone 上的表现。当我登陆页面时，视频是这样显示的（观看图片）--> enter image description here;它只有没有边框的播放按钮，但事实并非如此，稍后我将在视频上设置缩略图。

有趣的事情发生了，当视频开始以全屏模式（垂直）播放时就是这样--> enter image description here，然后当我翻转，水平手机时，视频“图片消失了”，显示是黑色的，但视频仍在后台播放和声音。

我尝试将 HTML 代码添加到视频中，例如：“playsinline”、“controls='true'”、“preload='Metadata'”。

我尝试过使用 CSS：

video{
object-fit:fill;
}
@media (min-aspect-ratio: 16/9) {
  #dekstop_video{
   
    width: 100%;
    height: auto;
  }
}
@media (max-aspect-ratio: 16/9) {
  #mobile_video {
   
   width:100%; 
    height: 100%;

    padding:0
  }
}

如果有人解决过这个问题，请帮帮我，因为我真的不明白为什么会这样。

解决方法

如果您使用的是 ios10 或更早版本，请尝试添加 webkit-playsinline。

与您的问题无关...但您应该解决的问题：

当您使用 display:none 在移动设备上隐藏桌面视频时，这并不意味着“下载：无”。 CSS 在下载开始后被解析。您的代码将为所有用户下载 2 个视频（这与您尝试执行的操作相反）

想看看它的实际效果吗？ https://www.trumptowerny.com/

拥有 2 个视频标签可确保浏览器同时请求“onas_video.mp4”和“onas_mobilna.mp4” 最好使用 JavaScript 插入源 - 基于屏幕大小（并且您只需要一个视频标签）