时间戳

首页 > 解决方案 > 在反应中滚动视频

javascript - 在反应中滚动视频

问题描述

我正在用 ReactJS 建立一个网站。我正在尝试在可以通过滚动浏览的网页上合并视频。很像这里的这个例子：https ://codepen.io/anon/pen/pKwQop

我想知道如何将其合并到我的代码中。我第一次尝试这样做给我这个错误：https ://imgur.com/a/KfRgrmM

到目前为止，这是我的代码：

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;

标签： javascripthtmlreactjsjsx

解决方案

看起来有两个问题。第一，您试图通过 ID 访问某些内容，但您似乎并没有宣布这个想法。但是，您也不应该这样做。相反，您应该指定一个ref并将其用于vid.

（请注意，语法最近发生了变化。该文档显示了最新的语法。那里还有一个指向旧语法的链接。）

class Test extends Component {
  constructor(props) {
    super(props);
    this.vid = React.createRef()
  }

  render() {
    // blah
    <video ref={this.vid} 
      /* blah */ 
    />
    // blah
  }
}

然后，不要使用vidin componentDidMount，而是使用this.vid.current.

addEventListener您可以更改的另一件事是直接将事件回调放在您<video>的渲染中，而不是使用：

<video onLoadedMetaData={ this.metaDataCallback } />

进行这些更改应该或多或少让它以 React 友好的方式按预期工作。

推荐阅读