Почему мое фоновое видео не работает в режиме мобильного просмотра? - PullRequest
2 голосов
/ 24 сентября 2019

Я искал в 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;
}

1 Ответ

1 голос
/ 24 сентября 2019
<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> 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...