0

我正在尝试拖放反应播放器视频组件。由于某种原因，拖动不起作用。

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

现在，我将我的选择视为以下选项之一：

  • Fork 一个 react-player 的私有副本，并删除鼠标交互或通过添加一个mouse={false}. 也许将此功能添加回 react-player。

  • 某种类型的 react-dnd 解决方法，例如位于视频上方的透明组件。拖放透明组件。

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

示例代码 - 自动运行视频

上面的示例代码结合了两个示例。第一个示例显示了一个无法拖动的视频。第二个在比视频大的 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);
4

1 回答 1

0

诀窍是关闭反应播放器上的控件。

但。

根据 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}
/>

react-dnd 与 react-player 一起使用的完整代码示例它甚至可以拖动视频的屏幕截图，这超出了我的预期。

于 2019-05-02T21:13:05.593 回答