Search code examples
reactjsamazon-s3videoreact-component

Video in S3 bucket won't open on page load

I have a video in an Amazon S3 bucket. The video is around 6MB in size, has been made public, and is used as a background video for the homepage of my React application. I have applied the object URL directly to the video html element however when the React application loads, the video does not show. If I were to go to a different page and come back to the homepage, the video appears just fine.

Code:

import React, { Component } from 'react';
import black from '../../imgs/backgrounds/black.jpg';

class HeaderVideo extends Component {

    render() {
        return (
            <video poster={black} autoPlay={true} loop>
                <source src="https://beatsbyzero.s3.us-east-2.amazonaws.com/videos/blackwhite1.mp4" type="video/mp4" />
            </video>
        )
    }
}

export default HeaderVideo;

Any ideas on how to handle this?

Solution

  • I think I found the root cause: https://blog.chromium.org/2017/09/unified-autoplay.html

    I prepared video for you (without sound track) https://drive.google.com/file/d/1lHGyoq-UHZ0YBHLY0-C_zf9yWkGgU2AZ/view?usp=sharing

    Your video had a silent audio:

    enter image description here

    Now video hasn't audio: enter image description here

    Please, download video and replace it, then run your code. I hope all be fine.

    It can be helpful also: Browser denying javascript play()

    How to remove an audio track from an mp4 video file: https://unix.stackexchange.com/questions/6402/how-to-remove-an-audio-track-from-an-mp4-video-file