CODEWITHSUNDEEP
javascripthtmlreactjsgoogle-chromehtml5-video
user2911825
user2911825

Reputation: 41

HTML5 video not loading in chrome, but works when the developer console is opened up

I am working on a web app for a client, and there is a problem with the HTML5 video tag.

The problem is that the video won't load in chrome, but works on Safari, Firefox and IE.

So I start debugging in chrome, but I found out that if I refresh the page with console opened, the video would load. But when I close the console and refresh, the video would not load...

Here are the few things I have tried:

Have multiple type of videos, in mp4 and webm. in componentDidMount, replace the video with the same code.

But none seems to work...

<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>

Upvotes: 2

Views: 7867

Answers (2)

Alex
Alex

Reputation: 2232

This worked fine for me.

Completed parameters loop="false" and autoplay="false" as you had them emptied e.g. loop="", etc.

<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>

Upvotes: 0

user2911825
user2911825

Reputation: 41

I figured out my problem was that I have autoplay enabled, but with chrome's new policy, autoplay isn't allowed unless it's the video is muted, so adding the muted attribute fix the problem.

Upvotes: 2

Related Questions