问题标签 [react-player]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
2162 浏览

javascript - 为生产而构建会导致模块 package.json 中的错误

不知道发生了什么,当我进行产品构建(“cross-env NODE_ENV=production API_V=production npm run build”)时,我从 react-player 收到此错误:

./node_modules/react-player/lib/ReactPlayer.js 中的错误模块构建失败:ReferenceError:“C:\work\website\node_modules\react-player\ 中指定的未知插件“transform-es3-member-expression-literals” package.json.env.production" 在 0,尝试相对于 "C:\work\website\node_modules\react-player" 进行解析

我已经从 babel 中排除了 node_modules:

按要求,

webpack.base.babel.js:

webpack.projd.babel.js:

webpack.dev.babel.js:

最后是 webpack.dll.babel.js:

包.json:

0 投票
1 回答
4744 浏览

javascript - React Player 和加载多个 URL 源

我有一个关于获取一组音频文件并将它们组合成一个音频文件进行播放的快速问题。

我正在使用 React Player,并认为可以通过 url 属性将多个源添加到播放器中,并且它会起作用,但不幸的是,到目前为止,我的情况并非如此。

我从一个返回文件的 API 接收我的音频文件...... 位置是文件的流式传输位置

我将评论的位置附加到我的应用程序流 url,它在配置文件中定义,因此传递到 React Player 的 url 文件将如下所示: http://localhost/media/dump/comments/xxxxxxx.mp3

有没有人有任何关于如何将这些文件组合成一个我可以播放的文件的提示/建议?或者有没有办法使用 URL 将多个源加载到 React Player 中?

感谢您提前回复,希望我能够清楚地传达我的问题。

如果您需要更多信息,请告诉我,我很乐意添加更多代码以找到解决方案。

0 投票
1 回答
6944 浏览

reactjs - 如何在播放 mp4 文件时修改 React Player 的控件。我希望禁用下载选项

我想从播放器中删除图像中标记圆圈的选项,以便无法下载视频

0 投票
3 回答
17551 浏览

javascript - React 播放器缩略图

我正在使用 react-player 播放视频。不确定是否有更好的选择,但这似乎可以完成工作。我唯一的问题是,我需要获取视频的缩略图。知道我将如何解决它吗?

如果您知道在 React Web 应用程序中使用受支持的缩略图播放视频的更好选择,那也很棒。

谢谢

编辑:我最终将视频本身用作缩略图并阻止了所有鼠标事件。然后使用父 div 作为按钮。在 youtube 的情况下,我将视频替换为 youtube ( https://img.youtube.com ) 提供的缩略图,因为视频上有很大的播放按钮。大多数其他玩家都没有。

0 投票
2 回答
3434 浏览

reactjs - react-player 和需要授权的问题

我正在开发一个应用程序,其中服务器流一些视频文件,基于 ReactJS 的客户端可以使用react-player播放该流。

当我使用 ReactPlayer 组件中的普通 url 变量播放流时,一切都很好。但是现在我需要在标头中传递一些数据(授权令牌)以及请求以访问流。

理想情况下是使用 Fetch API 以某种方式向流发出请求,然后仅将视频数据绕过到 ReactPlayer 组件,但我不确定是否可能。

react-player 支持这种情况吗?如果没有,我该如何实现这一点,或者我可以使用任何其他支持自定义请求制作的通用视频播放器?

如果这很重要,后端服务器是基于 Flask 的 REST api 应用程序。

0 投票
0 回答
108 浏览

javascript - iframe 上的模态不允许拖动

我有一个位于 iframe 视频之上的模式,该视频有一个可以帮助我上传文档的 dropzone。见例子。当dropzone不覆盖 iframe 时,它​​可以完美运行。

我想知道要在一般父页面文档而不是 iframe 文档上正确注册相应的浏览器事件需要发生什么?或者,如果你们中的任何人对如何完成这项工作有任何想法,我希望您能提供帮助。谢谢你的帮助。

0 投票
1 回答
77 浏览

reactjs - TypeError:无法读取未定义的属性“lightBoxHandler”

视频播放完毕后,我正在尝试自动关闭灯箱。

onEnded属性在 99.99% 的时间里都很好用,但有时它不会触发回调。所以我尝试使用onDuration.

上述错误发生在设置为的回调中onDuration。控制台打印持续时间很好,但我不确定为什么它无法识别以下方法并抛出错误。this.props.lightBoxHandler(this.props.entry.type);

0 投票
1 回答
520 浏览

reactjs - 如何显示数组元素bu打开模式?

我从 React 开始,我有一个问题。

我正在使用 Youtube API 来捕捉播放列表视频。使用 .map 方法,我在卡片中显示所有视频缩略图和标题。当我点击一张卡片时,我想通过“捕捉”我的数组的索引(在我的状态下)来启动视频(在 Reactplayer 中)。非常感谢您提供的答案和建议:)

下面是我的代码:

0 投票
0 回答
1011 浏览

reactjs - 无法在“DOMWindow”上执行“postMessage”

我使用 react-player 并得到一个错误

生成代码 iframe

0 投票
1 回答
1933 浏览

reactjs - 跨域读取阻塞 (CORB) 阻止了 React 应用程序上的跨域响应

我正在 React 上运行一个简单的应用程序,以使用 React-Player 组件显示我在https://my.pcloud.com/上上传的文件中的音轨。

但是,曲目不显示,我在控制台上收到以下错误:

“跨域读取阻止 (CORB) 阻止了跨域响应https://my.pcloud.com/publink/show?code=XZlsqq7ZK4mnFfNp1rJq8neYkc77Gp0yCd17与 MIME 类型文本/html。请参阅https://www.chromestatus.com/feature /5629709824032768了解更多详情。”

我做了一些搜索,我意识到我需要做一些服务器端的事情来解决这个问题。我可以在客户端做些什么来解决这个问题吗?如果没有,关于如何设置服务器并获取音频播放器所需内容的任何好的教程/指南?谢谢!