无法拖放反应播放器组件

Question

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

我的猜测是 react-player 组件正在获取鼠标操作，而不是将其传递给 react-dnd 包装器。那么，也许它是一个 bug/feature 的 react-player？我希望设置 controls={false} 来告诉 react-player 不要那样做，所以可能有些地方我不明白。

现在我认为我的选择是：

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

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

Sample code - auto runs video

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

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

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);

Answer 1

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

但是

根据 react-player 文档，"Vimeo, Twitch and Wistia player will always display controls"。在现实中，可能会有一两个附加播放器无法关闭显示控件。

如果您改为播放 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 连视频截图都拖出来了，超出我的想象

无法拖放反应播放器组件

Can't drag and drop a react-player component

reactjs

react-dnd

react-player