无法拖放反应播放器组件答案

【问题标题】：Can't drag and drop a react-player component无法拖放反应播放器组件
【发布时间】：2019-09-19 10:56:08
【问题描述】：

我正在尝试拖放一个 react-player 视频组件。由于某种原因，拖动不起作用。

我的猜测是 react-player 组件正在抓取鼠标动作，而不是将其传递给 react-dnd 包装器。那么，也许这是反应播放器的错误/功能？我希望设置 controls={false} 来告诉 react-player 不要那样做，所以可能有一些我不明白的地方。

现在我认为我的选项之一是：

Fork 一个私有的 react-player 副本，删除鼠标交互或通过添加 mouse={false} 将其关闭。也许将此功能添加回 react-player。
某种类型的 react-dnd 解决方法，例如位于视频上方的透明组件。拖放透明组件。

我还有其他选择吗？我错过了什么？有没有人有关于在 react-player 中关闭鼠标事件的提示？谁能指出我添加透明组件进行拖放的示例？（我想我可以做到这一点......但看到一个例子可能会加快速度！）

Sample code - auto runs video

上面的示例代码结合了两个示例。第一个示例显示了一个无法拖动的视频。第二个在比视频大的 div 中有一个视频。您可以通过视频周围的蓝色“手柄”拖动第二个视频，但不能通过抓取视频本身来拖动。

（最后一个小问题。我不想在被拖动的项目上显示实时视频，只是一个矩形就可以了。无论如何，被拖动的实时视频可能太迟钝了。）

import React, { Component } from "react";
// import ReactDOM from "react-dom";
import { DndItemTypes } from "./dndConstants";
import { DragSource as dragSource } from "react-dnd";
import ReactPlayer from "react-player";

const boxSource = {
  beginDrag: (props, monitor, component) => {
    return { name: "Drag me" };
  },

  endDrag: (props, monitor, component) => {
    if (!monitor.didDrop() || !component) {
      return;
    }
  },

  canDrag: props => {
    return true;
  }
};

const collect = (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
    canDrag: monitor.canDrag()
  };
};

class DragBox extends Component {
  render() {
    const {
      connectDragSource,
      connectDragPreview
      // isDragging, canDrag
    } = this.props;

    return connectDragPreview(
      <div>
        <p style={{ margin: "10px" }}>Try to drag this video, and fail</p>
        {connectDragSource(
          <div
            style={{
              height: "100px",
              width: "100px"
            }}
          >
            <ReactPlayer
              url="https://vimeo.com/245291363"
              height="100px"
              width="100px"
              volume={0.8}
              muted={true}
              playing={true}
              controls={false}
            />
          </div>
        )}
      </div>
    );
  }
}

module.exports = dragSource(DndItemTypes.DROP_BOX, boxSource, collect)(DragBox);

【问题讨论】：

标签： reactjs react-dnd react-player

【解决方案1】：

诀窍是关闭 react-player 上的控件。

但是。

根据 react-player 文档，“Vimeo、Twitch 和 Wistia 播放器将始终显示控件”。实际上，可能还有一两个玩家无法关闭显示控件。

如果您改为播放 mp4 文件，一切正常！

<ReactPlayer
  url="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
  height="100px"
  width="100px"
  volume={0.8}
  muted={true}
  playing={true}
  controls={false}
/>

Full code example with react-dnd working with react-player它甚至拖了视频的屏幕截图，这超出了我的预期。

【讨论】：