问题标签 [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 - 使用 react-player 播放 mp3 文件时出现“无法播放媒体。没有请求格式的解码器:text/html”错误
我一直在尝试使用react-player 播放单个音频文件,但它似乎没有正确读取文件。这是我用来播放文件的 React 道具。
每当我的应用程序呈现播放器时,播放器都不会读取文件并在 Firefox 控制台中给我以下错误:
我用过的其他浏览器没有
reactjs - 使用 CookPete/react-player 从 S3 播放 HLS 视频
在我的 s3 存储桶中,我有两个对象:
- https://mybucketname.s3-eu-west-1.amazonaws.com/public/myfilename.m3u8
- https://mybucketname.s3-eu-west-1.amazonaws.com/public/myfilename_360.ts
因为我使用的是来自 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 执行获取请求。
reactjs - 视频以react-player结束后如何在视频上显示按钮
在我的 React 应用程序中,我想要一个按钮来导航到视频中出现的下一课,就在当前视频播放完毕之后。我react-player
用来显示视频。我想知道我怎样才能做到这一点react-player
。非常感谢任何有用的提示。
ios - Safari手机上的视频全屏问题
我们正在使用 react-player ,但使用自定义控制器。我们为全屏功能安装了 react-fullscreen,但它在 safari(mobile) 上不起作用。网上都说全屏 API 用在 react-fullscreen 组件中,IOS 不支持。给我们一个解决方案
javascript - 在 react-player 中将默认音量设置为 50%
我在我的一个视频播放网站上使用了一个 react-player。当视频开始播放时,我有静音视频。当我取消视频静音时,它将以 100% 的音量取消静音,但我需要将音量启动到 50%。
初始化工作正常。如果我将音量设置为 50%,那么它工作正常,但静音/取消静音音量升至 100%
请帮助我解决这个问题
react-player - React-player 缩小 Vimeo 视频
我正在使用 React 播放器版本 1.15.3 在 React Web 应用程序中播放视频。我在显示来自 Vimeo 的视频时遇到问题,反应播放器似乎将它们缩小到迷你尺寸。我已经尝试了我能想到的一些事情以及这里的响应式播放器推荐https://github.com/CookPete/react-player#responsive-player但仍然没有运气。我需要让它填充它的父容器并做出响应。 问题截图
反应播放器的代码
反应播放器的 CSS 代码
谢谢您的帮助
reactjs - 反应原生音频播放器
我正在尝试为我的应用程序实现一个反应原生的音频播放器。这个播放器的目的是播放一些从 JSON 文件中获取的录音带。目前我成功地为它做了 UI,但没有任何功能。
做一些研究我发现我需要 react-native-track-player 包才能使其工作。但是,我真的很难理解文档。如果有人能给我一个提示,那就太好了。
我将附上播放器的代码:
欢迎任何帮助。
好的,所以我设法播放并暂停了声音,但我很确定这不是正确的方法
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
谢谢!
javascript - 有多个玩家,强制只有一个玩家在玩 [React Player]
我有类似的问题https://github.com/CookPete/react-player/issues/470
在浏览了许多插件之后,这是我发现的最好的 React 媒体播放器,非常感谢!
我仅将它用于文件播放器类型的音频。我有一个播放列表,它只是多个元素的列表,我想强制它一次只播放一个玩家。因此,如果一个玩家正在玩,而您按下另一个玩家的播放,那么第一个玩家会停止。目前,它将同时播放任何和所有玩家。
如何在任何给定时间强制只有一个玩家在页面上玩?
这是我的演示:https ://codesandbox.io/s/thirsty-stonebraker-9q3zi?file=/src/App.js
谢谢如果有人可以帮助我:)
javascript - React-Native 音频播放器中的传递函数
我正在尝试基于一个名为冥想列表的函数动态播放声音。该函数的返回为我提供了它在播放器中工作的正确路径。
但是,如果我调用 URL 上的函数不起作用,则会出现以下错误:拒绝,找不到变量冥想列表。我还尝试使用 JSON.stringify 返回 adress.meditation.meditationPlayerAdress 但没有运气