S3 存储桶中的视频不会在页面加载时打开

Question

我在 Amazon S3 存储桶中有一个视频。该视频大小约为 6MB，已制作 public，用作我的 React 应用程序主页的背景视频。我已将对象 URL 直接应用到视频 html 元素，但是当 React 应用程序加载时，视频不显示。如果我转到另一个页面并返回主页，视频显示效果很好。

代码：

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;

关于如何处理这个问题有什么想法吗？

Answer 1

我想我找到了根本原因： https://blog.chromium.org/2017/09/unified-autoplay.html

我为你准备了视频（无音轨） https://drive.google.com/file/d/1lHGyoq-UHZ0YBHLY0-C_zf9yWkGgU2AZ/view?usp=sharing

您的视频有静音：

现在视频没有音频:

请下载视频并替换它，然后运行您的代码。希望一切都好

它也有帮助：

如何从 mp4 视频文件中删除音轨： https://unix.stackexchange.com/questions/6402/how-to-remove-an-audio-track-from-an-mp4-video-file

S3 存储桶中的视频不会在页面加载时打开

Video in S3 bucket won't open on page load

video

amazon-s3

reactjs

react-component