我正在尝试构建一个包含全屏背景图片的简单着陆页,该图片会在内容加载后立即播放。
有没有办法在React中使用React或CSS?
我已经尝试过使用npm模块react-drive-in,但我终生无法弄清楚如何在视频上加载我的React组件。视频不断加载到我的其他组件上。
答案 0 :(得分:9)
实际上,我能够让Trevor的代码在我的项目中正常运行。我必须在源元素中添加一个结束标记,就像这样。
<video id="background-video" loop autoPlay>
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" />
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg" />
Your browser does not support the video tag.
</video>
另请注意,'autoplay'应更改为'autoPlay'或React会向您发出警告,而不是自动播放视频。除了这两个更改之外,复制和粘贴代码应该可以正常工作。
ES6 / Babel示例:
'use strict';
import React, {Component} from 'react';
class Example extends Component {
constructor (props) {
super(props);
this.state = {
videoURL: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'
}
}
render () {
return (
<video id="background-video" loop autoPlay>
<source src={this.state.videoURL} type="video/mp4" />
<source src={this.state.videoURL} type="video/ogg" />
Your browser does not support the video tag.
</video>
)
}
};
export default Example;
答案 1 :(得分:3)
我觉得这样的事情会奏效:
#background-video{
height: 100%;
width: 100%;
float: left;
top: 0;
padding: none;
position: fixed; /* optional depending on what you want to do in your app */
}
&#13;
<video id="background-video" loop autoplay>
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
&#13;
根据您使用的视频或客户端屏幕的大小,您可能会遇到比率问题。
因此,您可能需要查看this帖子。
还要考虑今天屏幕的大小。如果有人有一个可笑的大屏幕或类似的东西,你打算做什么?除非视频具有相同的分辨率,否则视频将无法适应屏幕。
我不建议视频是一个坏主意。我只是想让你意识到这些问题!
祝你好运!答案 2 :(得分:3)
import sample from './sample.mp4';
<video className='videoTag' autoPlay loop muted>
<source src={sample} type='video/mp4' />
</video>
感谢注意&#39;自动播放&#39;应更改为“自动播放”#39;来自Mr_Antivius。 这是在React中播放视频的另一种方法。这个对我有用。请记住,sample.mp4文件位于JS文件的同一目录中。
答案 3 :(得分:0)
以下代码也设置了张贴者。在视频加载时或在无法播放视频的浏览器中显示。
import clip from './clip.mp4';
import Poster from './Poster.png';
<video autoPlay loop muted poster={Poster}>
<source src={clip} type='video/mp4' />
<source src={clip} type="video/ogg" />
</video>
但是,最好仅在较大的设备上显示该背景视频。因为在手机上,背景视频可能会占用过多的系统资源并影响性能。因此,请添加媒体查询并为移动设备设置display:block。