HTML5-видео не загружается в Chrome, но работает при открытии консоли разработчика

Question

Я работаю над веб-приложением для клиента, и существует проблема с тегом видео HTML5.

Проблема заключается в том, что видео не загружается в Chrome, но работает в Safari, Firefox.и IE.

Итак, я начинаю отладку в chrome, но обнаружил, что если я обновлю страницу с открытой консолью, видео загрузится.Но когда я закрываю консоль и обновляю, видео не загружается ...

Вот несколько вещей, которые я пробовал:

Имейте несколько типов видео, в mp4 и webm.в componentDidMount замените видео тем же кодом.

Но, похоже, ничего не работает ...

<div class="Top">
    <div class="video-container BGVideo">
        <video id="videobg" class="video-background" preload="true" loop="" autoplay="" poster="/img/azzura.jpg">
            <source src="/img/azzura.mp4">
            <source src="/img/azzura.webm">
        </video>
        <div class="video-overlay"></div>
        <div class="video-content">
            <div class="BGContent">
                <div class="scrollDown">
                    <a class="button"><i class="fa fa-chevron-down"></i></a>
                </div>
            </div>
        </div>
   </div>
</div>

Answer 1

Я понял, что моя проблема в том, что у меня включен автозапуск, но с новой политикой chrome автозапуск не разрешен, если видео не отключено, поэтому добавление атрибута muted решит проблему.

Answer 2

Это прекрасно сработало для меня.

Заполненные параметры loop="false" и autoplay="false" по мере их опустошения, например loop="" и т. Д.

<div class="Top">
    <div class="video-container BGVideo">
        <video id="videobg" class="video-background" preload="true" loop="false" autoplay="false" poster="">
            <source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4">
        </video>
        <div class="video-overlay"></div>
        <div class="video-content">
            <div class="BGContent">
                <div class="scrollDown">
                    <a class="button"><i class="fa fa-chevron-down"></i></a></div>
                </div>
            </div>
        </div>
    </div>