Question

我正在尝试拖放反应播放器视频组件。由于某种原因，拖动无法正常工作。

我的猜测是react-player组件正在抓取鼠标动作，而不是将其传递给react-dnd包装器。因此，也许这是React Player的错误/功能？我希望将controls={false}设置为告诉React Player不要这样做，所以也许有些我不了解的地方。

现在我可以看到以下选项之一：

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

Answer 1

技巧是关闭反应播放器上的控件。

但是。

根据反应播放器文档，“ 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它甚至拖动了视频的屏幕截图，这超出了我的期望。

无法拖放反应玩家组件

1 个答案: