[RN]实现在系统播放器上控制app内的媒体播放

原创 已于 2022-07-04 16:31:26 修改 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #音视频 #react native

于 2022-02-17 17:51:41 首次发布
这篇博客探讨了如何使用react-native-track-player在iOS和Android上实现远程控制的音频播放，并介绍了如何处理与react-native-video的音频冲突。同时，通过react-native-music-control来实现锁定屏幕和通知中心的媒体控件管理。在iOS中，它能将音频信息同步到系统播放器，而Android则通过通知栏播放器进行控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

方法:

  1. react-native-track-player
    react-native-track-player适用于一些远程控制app内的音频播放的情况, ios上会把音频信息同步到系统播放器上, android上会生成一个类似通知的播放器。但是这个插件和react-native-video会生成两个音轨, 这个插件相当于一个video。
    文档

  2. 自己调用ios提供的监听远程控制方法做处理

  3. react-native-music-control

在 iOS 和 Android 的锁定屏幕和通知中心显示和管理媒体控件。

可以通过监听远程控制对video做相应的处理

基于STM32设计的智能婴儿床控制系统_131
08-07 7072
当前设计了一款基于单片机的智能婴儿床控制系统，是一种能够监测婴儿状态，提供智能安抚，还可进行远程监控的控制系统，该系统主要组成部分分为：环境质量模块、温湿度监测模块、声音模块、报警模块、安抚情绪模块以及Wi-Fi模块六大模块：
基于STM32+华为云设计的智慧农业灌溉系统(2023升级版)(158)
热门推荐
10-23 1万+
本项目设计一种基于STM32的智慧农业监测系统。该系统能够检测空气温度、湿度、光强度和土壤湿度等关键指标，并自动调节浇水量，实现作物生长环境的精细化管理。同时，本项目还支持本地LCD屏幕数据显示和通过ESP8266上传数据到华为云物联网平台，同时搭建流媒体服务器实现摄像头远程监控。最重要的是，本项目将利用Qt开发Android手机APP，使用户可以远程查看监测情况，了解农作物生成情况。
RN-Music-Player:一个由React Native制作的简单优美的音乐播放器
05-02
RN音乐播放器 一个由React Native制作的简单优美的音乐播放器 下载 查看@ saa27音乐播放器，该播放器还具有其他一些功能
017：RN音频播放
黄孝果的博客
04-22 773
导入 yarn add react-native-sound yarn add @react-native-community/slider 工具类sound.ts import Sound from 'react-native-sound' // 在静音模式下启用播放 Sound.setCategory('Playback'); let sound: Sound; const initPlayer = (filepath: string) => { return new ..
React Native Track Player：构建专业级音乐应用的音频解决方案
gitblog_01158的博客
06-11 320
React Native Track Player：构建专业级音乐应用的音频解决方案 项目概述 React Native Track Player 是一个专为音乐类应用设计的全功能音频模块，它为React Native开发者提供了构建专业级音乐播放器所需的核心功能。不同于简单的音频播放器，这个库深度集成了移动平台的原生音频能力，让开发者能够轻松实现复杂的音乐播放场景。 核心特性详解 1. 跨平台支...
RN开源播放器Video组件(react-native-video)
小毅哥哥的博客
07-01 8970
开源项目地址: https://github.com/brentvatne/react-native-login一. 项目介绍 该组件进行封装成React Native平台播放器Video组件,大家可以使用该组件进行播放视频啦~不过支持React Native的版本最低0.19版本。二.1.1. 运行命令进行安装npm install react-native-video --save1.2.i
rn视频播放集成react-native-yz-vlcplayer
icon_sun的博客
06-21 314
视频播放
rn 视频播放组件react-native-video
weixin_43294560的博客
09-04 3439
1、安装 yarn add react-native-video 2、导入 import Video from 'react-native-video'; 3、使用 <Video ref='video' source={{uri:'https://video.699pic.com/videos/73/92/43/b_mPEcRsUxTkE91597739243.mp4'}} //url或本地文件 volume={5} //放大声音
OneM是一款纯ReactNative打造的集杂志浏览音乐播放视频播放于一体的综合性App并且支持iOS和Android双平台
08-10
开发者可以通过JavaScript接口来控制播放、暂停、前进和后退等功能，同时，这些库还能与系统音乐播放器进行交互，提供一致的用户体验。 视频播放部分可能采用了`react-native-video`等组件，它支持多种视频格式，并...
移动开发：React Native 的视频播放功能实现方法
最新发布
移动开发前沿的博客
07-11 338
在当今移动应用开发领域，视频内容的展示和播放已成为众多应用的核心功能之一。React Native 作为一种跨平台的移动开发框架，为开发者提供了高效、便捷的开发方式。本文章的目的在于详细介绍如何在 React Native 应用中实现视频播放功能，涵盖了从基本原理到实际代码实现的各个方面，适用于各种需要集成视频播放功能的 React Native 项目。本文将按照以下结构进行阐述：首先介绍核心概念与联系，让读者了解 React Native 架构以及视频播放相关原理；
react-native-sound-player：在ReactNative中播放声音文件
02-05
React本地声音播放器 使用ReactNative播放音频文件，从URL流音频。 安装 1. yarn或npm // yarn yarn add react-native-sound-player // or npm npm install --save react-native-sound-player 2.连结 对于RN> = 0.60，您可以跳过此步骤。 react-native link react-native-sound-player 用法 播放带有文件名和类型的声音 将声音文件添加到iOS / Android。 在iOS上，将声音文件拖
react-native-video-player：React Native的视频播放器，带有控件
02-05
React本机视频播放器 一个带有一些控件的React Native视频播放器。 该播放器使用react-native-video进行视频播放。 安装 yarn add react-native-video-player react-native-video react-native-vector-icons 要么 npm install --save react-native-video-player react-native-video react-native-vector-icons 然后，对于React Native> = 0.60： cd ios pod install 在An
RN-Open-Audio-Player:使用 React Native 打开音频播放器
05-29
一个使用React Native构建的简单音频播放器。 您可以在查看 Web 项目。 Set Up Firebase Project 要设置 Firebase Web 项目，请参阅本指南 [ ] 确保在 Firebase 项目中启用电子邮件和密码登录。 [ ] 设置 firebase 存储以保存音频和图像文件。 [ ] Set up The APIs 将基本 url 添加到 src/config.js 可用脚本 在项目目录中，可以运行： npx react-native run-android npx react-native run-ios
React Native 视频播放器
01-07
React Native 视频播放器，自定义封装。支持暂停播放，快进，全屏等效果。
ReactNative实现音乐播放
08-11
React Native 实现音乐播放
react-native-track-player:为音乐应用程序创建的完全成熟的音频模块。 提供音频播放、外部媒体控制、chromecast 支持、后台模式等！
07-24
为音乐应用程序创建的成熟音频模块。 提供音频播放、外部媒体控制、背景模式等！ :warning: V2 警告：您目前正在查看我们仍在进行中的v2分支。 我们目前正在努力尝试发布2.0 。 我们有2.0.0-rc18预发布版，我们希望尽快完成此版本（您可以在跟踪进度）。 我们没有更新日志，但一旦发布更稳定，我们将把它打包。 如果您正在寻找react-native-track-player v1.2.7的自述文件和示例 - 在上找到它。 特征 轻量级- 优化以根据您的需要使用最少的资源 感觉原生- 由于所有内容都构建在一起，因此遵循与真实音乐应用程序相同的设计原则 多平台- 支持 Android、iOS 和 Windows 媒体控制支持- 提供从蓝牙设备、锁屏、通知、智能手表甚至汽车控制应用程序的事件 本地或网络、文件或流媒体- 无论媒体属于何处，我们都能为您服务 自适应比特率流支持- 支持 DA
RN上使用react-native-video视频播放器插件
11-26 2375
一、环境 “react”: “17.0.2”, “react-native”: “0.65.1”, 二、现象及解决办法 react-native-video安装后报错，是因为与react-native 0.65版本不兼容 解决方案： https://github.com/react-native-video/react-native-video/issues/2468 allprojects { repositories { .... # Keep the rest
Android 播放器(RN也可使用)实现 实现方案讲解
单的博客
04-21 786
拆解需求 1. RN使用 2. 播放器 最终实现的播放器功能：可以提供给RN使用，不带边缓存边播放功能的播放器。 1. RN使用实现 以组件的形式提供给RN使用，至于组件和native如何交互，主要通过重写RN的ViewGroupManager<T>实现。泛型传入的就是RN组件包装的native内部实现的播放器的view（player view）。 RN组件向native通信：...
[RN] 可播放视频的播放器版本
weixin_30672019的博客
07-01 514
可播放视频的播放器版本 "react": "16.6.3", "react-native": "0.57.8", "react-native-orientation": "^3.1.0", "react-native-vector-icons": "^4.3.0", "react-native-video": "^2.0.0" 使用参考： ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值