我网页的智能手机用户应该可以得到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中的示例代码作为基础，它显示了迄今为止最好的显示结果。
也许我走错了方向？
2条答案
按热度按时间4bbkushb1#
看起来
playsinline是丢失的部分。这篇文章是关键：https://stackoverflow.com/a/51432655/2556324c9qzyr3d2#
你可以添加attr“playsinline”或者你可以检查你的格式视频（. mp4或.ogg），我有同样的问题，但我检查的格式视频我修复了我的问题。你可以检查别人的视频。我希望能帮助你修复这个问题