React 中的背景视频

发布于 2025-01-11 02:47:27 字数 648 浏览 0 评论 0原文

我正在按照这个 CSS Trick 博客为 React 项目设置背景视频，但它不起作用。

https://css-tricks.com/full-page-background-video -样式/

//Video.jsx

<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

//index.css

#bgvid {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

原文

I'm following this CSS Trick blog to set a background video for a react project but it's not working.

https://css-tricks.com/full-page-background-video-styles/

//Video.jsx

<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

//index.css

#bgvid {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萤火眠眠 2025-01-18 02:47:27

好吧，使用 React 它对我来说工作得很好。我所要做的就是在 React 中使用视频元素。

首先，导入所需的背景视频，我假设它位于您的资产文件夹中。例如：

import Myvideo from "./assets/home/myvideo.mp4";


export default function Video(){
return (


    <div className='myvideo'>
      <video src={Myvideo} autoPlay loop muted />
      <div className="content">
      <h1>Hi</h1>
      <p>This is my background video</p>
      </div>
      </div>
      
     );
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

从“./assets/home/myvideo.mp4”导入我的视频；

在返回正文中包含视频元素。
CSS 样式如下。

//css
.myvideo {
  width: 100%;
  height: 100;
}

video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

您的视频现在应该在后台播放。

Well, with react it worked quite fine with me.All i had to do was to use the video element in react.

First, import the desired background video which i assume is in your assets folder.For instance:

import Myvideo from "./assets/home/myvideo.mp4";


export default function Video(){
return (


    <div className='myvideo'>
      <video src={Myvideo} autoPlay loop muted />
      <div className="content">
      <h1>Hi</h1>
      <p>This is my background video</p>
      </div>
      </div>
      
     );
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import Myvideo from "./assets/home/myvideo.mp4";

Include the the video element in your return body.
style your css as below.

//css
.myvideo {
  width: 100%;
  height: 100;
}

video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

Your video should now play at the background.

回复收藏 0 原文

半葬歌 2025-01-18 02:47:27

我正在回答我自己的问题。我必须在 JSX 中使用驼峰命名法。

    <video 
       autoPlay 
       loop
       playsInLine
       className="video-background" 
       muted
     >

html 标签解释

autoplay: 自动播放视频
Loop: 循环播放视频
className: 在 CSS 中使用
muted: 静音视频
Playsinline: 用于移动设备。它允许视频内联播放，而不是强制全屏视频播放

css 标签解释

z-index: -1 =>这意味着我希望视频位于网页内容后面1层
width: full screen width
backround: rgba(0,0,0,0) =>透明背景
（但如果你使用react-bootstrap，你可以只使用jsx标签，bg-transparent）

I'm answering my own question. I had to use camelCase for the JSX.

    <video 
       autoPlay 
       loop
       playsInLine
       className="video-background" 
       muted
     >

html tags explaination

autoplay: play video automatically
loop: loop the video
className: to use it in the css
muted: mute the video
playsinline: for mobile. it lets the video plays in-line, not forcing the full screen video play

css tags explaination

z-index: -1 => it means that I want the video to be 1 layer behind the web content
width: full screen width
backround: rgba(0,0,0,0) => transparent background
(but if you use react-bootstrap you can just use jsx tag, bg-transparent)

回复收藏 0 原文

~没有更多了~