我有一个视频标签的问题，需要在页面加载自动播放视频（我用它作为主页横幅），但视频是不是在所有的iOS移动的显示。我已经测试了所有桌面浏览器和Android移动的版本，这个问题只发生在iOS移动上。
我在我的React主页组件中有以下视频标签：
<main className={styles["main"]}>
<video
autoPlay={true}
muted={true}
loop={true}
playsInline={true}
className={styles["main-video"]}
>
<source src="path-to-my-video.webm" type="video/webm" />
</video>
</main>和SCSS样式：
.main {
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
padding-top: 15em;
display: flex;
justify-content: space-around;
align-items: center;
background-position: center;
&-video {
z-index: 0;
background-size: cover;
position: absolute;
top: 0px;
min-width: 100%;
min-height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
}
2条答案
按热度按时间3wabscal1#
从iOS 10开始，苹果对Safari for iOS中的自动播放策略进行了更改，以防止视频在网页上自动播放声音。视频的自动播放行为由操作系统控制，它限制视频在iOS设备上自动播放，包括iPhone和iPad。
要在移动的iOS设备上启用自动播放，您可以使用
playsinline属性沿着<video>标记上的muted属性。下面是一个例子：通过包含“playsinline”属性，视频将在与网页相同的上下文中播放，而不是进入全屏模式。“muted”属性确保视频播放时没有声音，因为iOS上的声音自动播放仍然受到限制。
请注意，即使使用
playsinline和muted属性，自动播放也可能无法在所有情况下工作，因为它最终取决于特定的iOS版本，浏览器和用户设置。提供播放按钮或其他用户发起的操作来启动视频播放始终是一个很好的做法，以确保在不同设备和平台上获得一致的体验。a0zr77ik2#
这可能与Safari强制执行的自动播放策略有关。将playsInline属性添加到您的video标签中，目前您使用的是video/webm格式，iOS不支持该格式。您应该提供iOS可以播放的其他格式的备用源，例如mp4。
你可以试试这个：
确保将“path-to-my-video.mp4”替换为MP4格式视频文件的实际路径。通过同时包含MP4和WebM格式，您可以覆盖更广泛的浏览器支持。此外，请仔细检查视频文件是否存在于指定的路径中并且可以访问。