使用React添加背景视频? [英] Adding a background video with React?

问题描述

我正在尝试构建一个包含全屏背景图像的简单登录页面，该页面将在内容加载后立即播放.

I'm trying to build a simple landing page that contains a fullscreen background image, that will play as soon as the content loads.

有没有办法在React内使用React或CSS做到这一点?

Is there a way to do this using React or CSS inside of React?

我已经尝试过使用npm模块react-drive-in，但是我一生都无法弄清楚如何在视频上加载我的React组件.该视频不断加载我的其他组件.

I've tried using the npm module react-drive-in, but I can't for the life of me figure out how to load my React components over the video. The video keeps loading over my other components.

推荐答案

import sample from './sample.mp4';

<video className='videoTag' autoPlay loop muted>
    <source src={sample} type='video/mp4' />
</video>

感谢您将自动播放"从Mr_Antivius更改为自动播放".这是在React中播放视频的另一种方法.这个对我有用.请记住，sample.mp4文件与JS文件位于同一目录中.

Thank the note that 'autoplay' should be changed to 'autoPlay' from Mr_Antivius. This is an alternative way to play the video in React. It works for me. Remember that the sample.mp4 file is in the same directory of the JS file.

这篇关于使用React添加背景视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！