Question

我遇到这种奇怪的行为，即我的HTML视频背景不会通过我的Feed component出现在我的视图中。我看到<video/>和<source/>标签出现在Chrome开发者工具中，但我只是没有看到浏览器的背景。

我在做什么错，我该如何解决？

import React from 'react';
import './Feed.scss';

const feed = (props) => {
    return (
        <div className="row">
            <video autoPlay muted loop id="myVideo">
                <source src={"../../../background/nyc.mp4"} type="video/mp4"/>
                Your browser does not support HTML5 video.
            </video>
        </div>
    );
};

export default feed;

这是CSS：

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

Answer 1

您需要导入该视频才能显示它。

import React from 'react';
import './Feed.scss';
import myVideo from "../../../background/nyc.mp4"


const feed = (props) => {
    return (
        <div className="row">
            <video src={myVideo} type="video/mp4" autoPlay muted loop/>
        </div>
    );
};

export default feed;

由我自己测试，并且有效。我假设您使用create-react-app。

为什么我的视频背景无法通过组件显示？

1 个答案: