问题标签 [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.
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:
javascript - React Player 和加载多个 URL 源
我有一个关于获取一组音频文件并将它们组合成一个音频文件进行播放的快速问题。
我正在使用 React Player,并认为可以通过 url 属性将多个源添加到播放器中,并且它会起作用,但不幸的是,到目前为止,我的情况并非如此。
我将评论的位置附加到我的应用程序流 url,它在配置文件中定义,因此传递到 React Player 的 url 文件将如下所示:
http://localhost/media/dump/comments/xxxxxxx.mp3
有没有人有任何关于如何将这些文件组合成一个我可以播放的文件的提示/建议?或者有没有办法使用 URL 将多个源加载到 React Player 中?
感谢您提前回复,希望我能够清楚地传达我的问题。
如果您需要更多信息,请告诉我,我很乐意添加更多代码以找到解决方案。
javascript - React 播放器缩略图
我正在使用 react-player 播放视频。不确定是否有更好的选择,但这似乎可以完成工作。我唯一的问题是,我需要获取视频的缩略图。知道我将如何解决它吗?
如果您知道在 React Web 应用程序中使用受支持的缩略图播放视频的更好选择,那也很棒。
谢谢
编辑:我最终将视频本身用作缩略图并阻止了所有鼠标事件。然后使用父 div 作为按钮。在 youtube 的情况下,我将视频替换为 youtube ( https://img.youtube.com ) 提供的缩略图,因为视频上有很大的播放按钮。大多数其他玩家都没有。
reactjs - react-player 和需要授权的问题
我正在开发一个应用程序,其中服务器流一些视频文件,基于 ReactJS 的客户端可以使用react-player播放该流。
当我使用 ReactPlayer 组件中的普通 url 变量播放流时,一切都很好。但是现在我需要在标头中传递一些数据(授权令牌)以及请求以访问流。
理想情况下是使用 Fetch API 以某种方式向流发出请求,然后仅将视频数据绕过到 ReactPlayer 组件,但我不确定是否可能。
react-player 支持这种情况吗?如果没有,我该如何实现这一点,或者我可以使用任何其他支持自定义请求制作的通用视频播放器?
如果这很重要,后端服务器是基于 Flask 的 REST api 应用程序。
reactjs - TypeError:无法读取未定义的属性“lightBoxHandler”
视频播放完毕后,我正在尝试自动关闭灯箱。
onEnded
属性在 99.99% 的时间里都很好用,但有时它不会触发回调。所以我尝试使用onDuration
.
上述错误发生在设置为的回调中onDuration
。控制台打印持续时间很好,但我不确定为什么它无法识别以下方法并抛出错误。this.props.lightBoxHandler(this.props.entry.type);
reactjs - 如何显示数组元素bu打开模式?
我从 React 开始,我有一个问题。
我正在使用 Youtube API 来捕捉播放列表视频。使用 .map 方法,我在卡片中显示所有视频缩略图和标题。当我点击一张卡片时,我想通过“捕捉”我的数组的索引(在我的状态下)来启动视频(在 Reactplayer 中)。非常感谢您提供的答案和建议:)
下面是我的代码:
reactjs - 无法在“DOMWindow”上执行“postMessage”
我使用 react-player 并得到一个错误
生成代码 iframe
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了解更多详情。”
我做了一些搜索,我意识到我需要做一些服务器端的事情来解决这个问题。我可以在客户端做些什么来解决这个问题吗?如果没有,关于如何设置服务器并获取音频播放器所需内容的任何好的教程/指南?谢谢!