Question

我搜索过Google几次，但都没看到这个问题，但是没有人知道为什么我的视频背景无法在移动设备上播放吗？

经历了无数的SO帖子之后，我在网络上找不到对我有用的文章/建议

我已经尝试过此建议（https://forum.webflow.com/t/html5-video-autoplay-now-working-on-mobile/40584），但是视频仍然无法在移动设备上播放。

如何使视频背景在移动视图中播放？

<video playsinline autoplay loop muted>
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
<div class="container h-100">
    <div class="d-flex h-100 text-center align-items-center">
        <div class="w-100 text-white">
            <h1 class="display-3">Video Header</h1>
            <p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
        </div>
    </div>
</div>

video {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

Answer 1

<div class="fullScreen">
    <video src="Videos/v1.mp4" autoplay loop muted class="screenVideo">         
    </video>
</div>
<h2 style="background-color: rgba(255,2,2,0.5);width: 100%;height:;">Hello`</h2>
<h2 style="background-color: rgba(255,2,2,0.5);width: 100%;height: ;">World</h2>

<style>
   *{
        margin: 0px;
        padding:0px;
    }
    .fullScreen{
        position: relative;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        background-size: cover;     
        z-index: -1;
    }
    .screenVideo
    {
        position: absolute;
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%;
    }

</style>

为什么我的背景视频不能在移动视图中工作？

1 个答案: