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

Posted 2023-02-25

【中文标题】S3 存储桶中的视频不会在页面加载时打开

【英文标题】：Video in S3 bucket won't open on page load

【发布时间】：2020-12-20 04:06:20

【问题描述】：

我在 Amazon S3 存储桶中有一个视频。该视频大小约为 6MB，已公开，并用作我的 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; 

关于如何处理这个问题的任何想法？

【问题讨论】：

我无法重现您的问题codesandbox.io/s/s3video-5y9ie?file=/src/components/HeaderVideo/…。它有效。

如果问题还没有解决，请尝试制作自己的沙箱。

您的沙箱和我的 (codesandbox.io/s/video-test-jbouq) 都在加载时显示，但由于某种原因，在我的项目中，它似乎在本地或我的实践环境中不起作用：mdberry721-001-site11.gtempurl.com

你能与项目分享你的 git 仓库吗（包含最小的本地代码被破坏）？

这是我的仓库：github.com/MDBerry/BeatsByZer0_V2/tree/master/BeatsByZer0_V2/…。所有操作都发生在 HeaderVideo 的“组件/元素”、TitleScreen 的“组件/部分”和主页的“组件/页面”中

【参考方案1】：

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

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

您的视频有无声音频：

现在视频没有音频：

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

这也很有帮助： Browser denying javascript play()

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

【讨论】：

虽然提供的确切步骤并不能完全解决问题，但这是非常重要的知识，帮助我找到了问题。请注意，此答案中提到的音频问题是正确的，但我还必须将“静音”属性添加到修复问题的