时间戳

首页 > 解决方案 > 无法设置未定义的属性（设置“播放器”）ReactPlayer

javascript - 无法设置未定义的属性（设置“播放器”）ReactPlayer

问题描述

我一直尝试seekTo()在 ReactPlayer 上使用该方法，但它一直告诉我this未定义。

function VideoPlayer({
  endVideo,
  timePlayed,
  controls,
  playing,
  videoDuration
}) {
  return (
    <div className="video-player">
      <ReactPlayer
        ref={(player) => {
          this.player = player;
        }}
        url="https://res.cloudinary.com/amarachi-2812/video/upload/v1630370229/videoplayback_1_pr2hzi.mp4"
        playing={playing}
        // playing={true}
        controls={controls}
        onStart={() => this.player.seekTo(timePlayed)}
        onEnded={endVideo}
      />
    </div>
  );
}

反应播放器错误

标签： javascriptreactjsreact-player

解决方案

你为什么在箭头函数中使用它？

尝试这个：

import React from "react";
import ReactPlayer from "react-player";

let player;

export const VideoPlayer = ({
  endVideo,
  timePlayed,
  controls,
  playing,
  videoDuration
}) => (
  <div className="video-player">
    <ReactPlayer
      ref={(ref) => {
        player = ref;
      }}
      url="https://res.cloudinary.com/amarachi-2812/video/upload/v1630370229/videoplayback_1_pr2hzi.mp4"
      playing={playing}
      // playing={true}
      controls={controls}
      onStart={() => player.seekTo(timePlayed)}
      onEnded={endVideo}
    />
  </div>
);

export const MemoizedVideoPlayer = React.memo(VideoPlayer);

推荐阅读