iOS html5 <video> 无法按预期播放答案

【问题标题】：iOS html5 <video> doesn't play as expectediOS html5 <video> 无法按预期播放
【发布时间】：2022-01-22 18:20:49
【问题描述】：

我网页的智能手机用户应该会收到 9:16 格式的嵌入式背景介绍视频。但是，在 iOS 上，如果线路太慢，他们只会获得为 9:16 mp4 存储的海报 jpg。在纵向的测试 iPad 上，9:16 视频有效，我不明白为什么？在 iPhone 上，方向无关紧要（无播放）。该视频在所有经过测试的 Android 手机和 Chrome 设备模拟器上都能正常播放。

这只是我应该处理介绍背景视频的网页代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>
        Demo
    </title>
    <style>
        .videoBg{
        position: relative;
        width: auto;
        background-color: rgba(0,0,0,7.0);
        }

        @media only screen and (min-width: 900px){
         .moveMobil{
         display: none;}
        }
        
        @media only screen and (max-width: 900px){
        .moveBig {
        display: none;}
        }      
    </style>
</head>

<body>
<div class="main">
  <div class="videoBg">
    <video poster="https://mixkit.imgix.net/videos/preview/mixkit-friends-with-colored-smoke-bombs-4556-0.jpg?q=80&auto=format%2Ccompress&w=460" 
    class="moveBig" 
    src="https://assets.mixkit.co/videos/preview/mixkit-friends-with-colored-smoke-bombs-4556-large.mp4" type="video/mp4" autoplay="true" loop="true" muted="true" width="100%"></video>
    <video poster="https://mixkit.imgix.net/videos/preview/mixkit-portrait-of-a-woman-in-a-pool-1259-0.jpg?q=80&auto=format%2Ccompress&w=460" 
    class="moveMobil" src="https://assets.mixkit.co/videos/preview/mixkit-portrait-of-a-woman-in-a-pool-1259-large.mp4" 
    type="video/mp4" autoplay="true"loop="true"muted="true" width="100%"></video>
 </div>
</div>

我使用来自 Hossam Elnaggar https://stackoverflow.com/a/57281456/2556324 的示例代码作为基础，它显示了迄今为止最好的显示结果。

也许我走错了方向？

【问题讨论】：

标签： ios html5-video

【解决方案1】：

看起来playsinline 是缺少的部分。这篇文章是关键：https://stackoverflow.com/a/51432655/2556324

【讨论】：