问题标签 [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 投票
1 回答
5657 浏览

javascript - 使用 react-player 播放 mp3 文件时出现“无法播放媒体。没有请求格式的解码器:text/html”错误

我一直在尝试使用react-player 播放单个音频文件,但它似乎没有正确读取文件。这是我用来播放文件的 React 道具。

每当我的应用程序呈现播放器时,播放器都不会读取文件并在 Firefox 控制台中给我以下错误:

我用过的其他浏览器没有

0 投票
2 回答
2502 浏览

reactjs - 使用 CookPete/react-player 从 S3 播放 HLS 视频

在我的 s3 存储桶中,我有两个对象:

因为我使用的是来自 AWS Amplify 的 Storage.get,所以我可以获得签名的 url。因此,当我使用 react-player https://github.com/CookPete/react-player在前端请求签名的 .m3u8 链接时,一切正常。但是,播放器会自动执行对 .ts url 的获取请求,因此我收到了 403 禁止错误,因为此 URL 未签名。

在播放器自动执行对 .ts 文件的获取请求之前,我希望能够使用 Storage.get 对其进行签名(或者能够在获取请求之前执行任何其他逻辑),然后仅在 AWS Amplify 之后,使用此签名的 .ts url 执行获取请求。

0 投票
1 回答
1278 浏览

reactjs - 视频以react-player结束后如何在视频上显示按钮

在我的 React 应用程序中,我想要一个按钮来导航到视频中出现的下一课,就在当前视频播放完毕之后。我react-player用来显示视频。我想知道我怎样才能做到这一点react-player。非常感谢任何有用的提示。

0 投票
0 回答
378 浏览

ios - Safari手机上的视频全屏问题

我们正在使用 react-player ,但使用自定义控制器。我们为全屏功能安装了 react-fullscreen,但它在 safari(mobile) 上不起作用。网上都说全屏 API 用在 react-fullscreen 组件中,IOS 不支持。给我们一个解决方案

0 投票
1 回答
546 浏览

javascript - 在 react-player 中将默认音量设置为 50%

我在我的一个视频播放网站上使用了一个 react-player。当视频开始播放时,我有静音视频。当我取消视频静音时,它将以 100% 的音量取消静音,但我需要将音量启动到 50%。

初始化工作正常。如果我将音量设置为 50%,那么它工作正常,但静音/取消静音音量升至 100%

请帮助我解决这个问题

0 投票
0 回答
1031 浏览

react-player - React-player 缩小 Vimeo 视频

我正在使用 React 播放器版本 1.15.3 在 React Web 应用程序中播放视频。我在显示来自 Vimeo 的视频时遇到问题,反应播放器似乎将它们缩小到迷你尺寸。我已经尝试了我能想到的一些事情以及这里的响应式播放器推荐https://github.com/CookPete/react-player#responsive-player但仍然没有运气。我需要让它填充它的父容器并做出响应。 问题截图

反应播放器的代码

反应播放器的 CSS 代码

谢谢您的帮助

0 投票
0 回答
732 浏览

reactjs - 反应原生音频播放器

我正在尝试为我的应用程序实现一个反应原生的音频播放器。这个播放器的目的是播放一些从 JSON 文件中获取的录音带。目前我成功地为它做了 UI,但没有任何功能。

做一些研究我发现我需要 react-native-track-player 包才能使其工作。但是,我真的很难理解文档。如果有人能给我一个提示,那就太好了。

我将附上播放器的代码:

欢迎任何帮助。

好的,所以我设法播放并暂停了声音,但我很确定这不是正确的方法

0 投票
3 回答
880 浏览

javascript - Typescript 为第三方自定义组件(react-player)输入参考

描述

我正在努力添加useRef附加在此播放器组件上的类型注释:react-player以根据文档演示源代码访问seekTo实例方法。我似乎无法让类型工作 - 我对打字稿有点陌生,可能会遇到这个错误,所以任何指针都会有所帮助!我查看了 react-player index.d.ts 并且可以看到那里列出了该函数,只需要知道我应该如何编写它。

预期行为

可以访问播放器的实例方法。

错误

Property 'seekTo' does not exist on type 'MutableRefObject<ReactPlayer | null>'.ts(2339)

重现步骤

我制作了一个小的 codeSandbox - 基本上试图模仿演示源来添加 ref 以在范围类型输入上使用该seekTo方法。onMouseUp

https://codesandbox.io/s/react-typescript-lqgvr?file=/src/index.tsx

谢谢!

0 投票
0 回答
722 浏览

javascript - 有多个玩家,强制只有一个玩家在玩 [React Player]

我有类似的问题https://github.com/CookPete/react-player/issues/470

在浏览了许多插件之后,这是我发现的最好的 React 媒体播放器,非常感谢!

我仅将它用于文件播放器类型的音频。我有一个播放列表,它只是多个元素的列表,我想强制它一次只播放一个玩家。因此,如果一个玩家正在玩,而您按下另一个玩家的播放,那么第一个玩家会停止。目前,它将同时播放任何和所有玩家。

如何在任何给定时间强制只有一个玩家在页面上玩?

这是我的演示:https ://codesandbox.io/s/thirsty-stonebraker-9q3zi?file=/src/App.js

谢谢如果有人可以帮助我:)

0 投票
2 回答
165 浏览

javascript - React-Native 音频播放器中的传递函数

我正在尝试基于一个名为冥想列表的函数动态播放声音。该函数的返回为我提供了它在播放器中工作的正确路径。

但是,如果我调用 URL 上的函数不起作用,则会出现以下错误:拒绝,找不到变量冥想列表。我还尝试使用 JSON.stringify 返回 adress.meditation.meditationPlayerAdress 但没有运气