我正在用 ReactJS 构建一个网站。我正在尝试将视频合并到可以通过滚动浏览的网页上。很像这里的例子:https://codepen.io/anon/pen/pKwQop
我想知道如何将其合并到我的代码中。我第一次尝试这样做时,我在这里遇到了这个错误:/image/sPPhC.jpg
这是迄今为止我的代码:
import React, { Component } from 'react';
import Navbar from '../components/GlobalNav';
import Footer from '../components/GlobalFooter';
import oculus from '../../public/static/video/oculus.mp4';
import './page2.css';
class Test extends Component {
componentDidMount() {
var vid = document.getElementById("Oculus");
var frameNumber = 0;
var playbackConstant = 500;
var setHeight = document.getElementById("Test");
vid.addEventListener('loadedmetadata', function() {
setHeight.style.height = Math.floor(vid.duration) * playbackConstant + "px";
});
function scrollPlay() {
var frameNumber = window.pageYOffset/playbackConstant;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
}
render() {
return (
<div className="Test">
<Navbar />
<div className="Site-content">
<video
tabIndex="0"
autobuffer="autobuffer"
preload="preload"
className="Oculus"
>
<source type="video/mp4" src={oculus} />
</video>
</div>
<Footer className="Footer" />
</div>
)
}
}
export default Test;
最佳答案
看起来有两个问题。第一,你试图通过 ID 访问某些东西,但你似乎没有声明这个想法。但是,您也不应该这样做。相反,您应该指定 ref并将其用于 vid
.
(请注意,语法最近发生了更改。该文档显示了最新的语法。其中还有指向旧语法的链接。)
class Test extends Component {
constructor(props) {
super(props);
this.vid = React.createRef()
}
render() {
// blah
<video ref={this.vid}
/* blah */
/>
// blah
}
}
然后,不要使用 vid
在componentDidMount
,使用this.vid.current
.
您可以更改的另一件事是不要使用 addEventListener
,将事件回调直接放在你的<video>
上在渲染中:
<video onLoadedMetaData={ this.metaDataCallback } />
进行这些更改或多或少应该让它以一种对 React 友好的方式按预期工作。
关于javascript - 在 react 中滚动视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50844867/