Reactjs S3桶中的视频赢得'；无法在页面加载时打开

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

代码：

import React，{Component}来自'React'；
从“../../imgs/backgrounds/black.jpg”导入黑色；
类HeaderServiceDeo扩展组件{
render（）{
返回(
)
}
}
导出默认的HeaderVideo；

---

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

我想我找到了根本原因：

我为你准备了视频（没有音轨）

您的视频有无声音频：

现在视频没有音频：

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

这也有助于：

如何从mp4视频文件中删除音频曲目：

---

我无法复制您的问题。它可以工作。如果问题还没有解决，请尝试创建您自己的沙盒。您的沙盒和我的沙盒（）都在加载时显示，但由于某些原因，在我的项目中，它似乎在本地或我的实践环境中不起作用：您可以与项目共享您的git repo（其中包含最小的本地代码）吗？这是我的repo:。所有操作都发生在HeadServiceDeo的“组件/元素”中，标题屏幕的“组件/部分”和主页的“组件/页面”中。虽然提供的确切步骤没有准确解决问题，但这是非常重要的知识，帮助我找到了问题。请注意，这个答案中提到的音频问题是正确的，但是我还必须在标签中添加“muted”属性来修复这个问题。将此答案标记为正确，谢谢！

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;