react native实现兼容Android与ios的视频播放器

呦吼～，我来啦，这是我的第一篇文章，当然是福利啦，项目代码可以直接运行使用的呀，这种便宜尽情挥霍去吧～。好了装嫩结束，来点实际的，这个项目其实是我主讲的一门视频课程(看文章就可以学到所有知识，若需要可以看视频)。

在这里通过文字的形式重新梳理所有知识，比视频内容知识点更多，主要包含两大主题：

一、使用react navigation实现一个类似qq的导航框架

二、两种实现视频全屏的原理和代码。

这片文章只是这个主题的一个开头，接下来会基于这两个主题，每个技术点都会有一篇详细的设计、实现以及原理的文章。下面先来吹嘘一番吧～，嘿嘿嘿

mukevideo概述

mukevideo是一个使用react native实现一个兼容ios，android的视频播放器并带有完整的类似qq的导航框架

Install

//码云地址
git clone https://gitee.com/codeveryday/mukevideo
//或者github地址
git clone https://github.com/codeverydaya/mukevideo.git
cd mukevideo
yarn install

第三方库

库名字	版本	描述
react-native	0.59.8	rn主库，提供rn基础功能
react-native-video	5.0.0	视频播放组件
react-native-linear-gradient	2.5.6	渐变色组件
react-native-orientation	3.1.3	控制屏幕的方向
react-navigation	3.11.1	用于app导航
react-native-gesture-handler	1.3.0	用于react navigation手势处理

功能介绍

调节倍速播放
视频的播放暂停
分辨率的适配
播放进度的调节
动画的效果制作
全屏的两种实现
react navigation构建出一个完整的类似qq的导航框架

效果图

番外篇

本项目是我录制的一门视频课程(React native开发播放器)，课程主要讲解一下内容，大家有需要可以去学习

课程内容

react navigation常用导航器
react navigation导航器组合使用，实战类似qq导航器
react navigation原理的深入与源码解读
react-native-video的使用与配置
视频播放器全屏适配
react native触摸事件处理与播放器的结合

课程目录

章	节
第一章导学与环境构建	1.1 导读
	1.2 慕课视频功能展示
	1.3 环境搭建
	1.4 环境与项目结构
第二章 react navigation构建导航框架	2.1 react navigation概述
	2.2 初识react navigation
	2.3 详解栈导航器
	2.4 深入react navigation原理
	2.5 其他三种导航器略讲
	2.6 类似qq导航框架的实现
	2.7 抛砖引玉的源码阅读
第三章产品设计—视频播放器	3.1 需求分析与结构构建
	3.2 UI实现视频控制层
	3.3 视频控制层的显隐
	3.4 可以触控的进度条
	3.5 全屏实现方案一
	3.6 全屏实现方案二
第四章课程总结	4.1 课程总结

总结

以上就是这个项目的主要内容，系列文，更多干货正在路上，毫无保留，点关注,不迷路，吹嘘就到这里，骨朵白，下次贱，哈哈哈～

react native实现兼容Android与ios的视频播放器相关推荐

android 回退函数,详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用发布时间:2020-09-29 09:25:52 来源:脚本之家阅读:137 作者:lqh 详解React Native监听A ...
unity android屏幕自适应,Android应用开发之unity打开移动摄像头，并自适应屏幕显示摄像头数据。兼容android和ios...
本文将带你了解Android应用开发之unity打开移动摄像头,并自适应屏幕显示摄像头数据.兼容android和ios,希望本文对大家学Android有所帮助. 跨平台并自适应显示摄像头数据新建工程并 ...
手机版(兼容android和ios)用户登录界面H5
本文主要是开发的一个手机版(兼容android和ios)的商城登录页面. 1.接下来直接上HTML的代码 <!DOCTYPE html> <html> <head> ...
回退监听android,详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用前言我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控an ...
H5监听键盘弹起收回，用法超简单！兼容Android、iOS。
引入以下代码,仅需2行代码即可监听! /*** 兼容Android.iOS各浏览器* H5键盘监控弹出(KeyboardUp).收起(KeyboardDown)事件定义* auth: huaichen ...
如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
Android进阶：自定义视频播放器开发（下）
上一篇文章我们主要讲了视频播放器开发之前需要准备的一个知识,TextureView,用于对图像流的处理.这篇文章开始构建一个基础的视频播放器. 一.准备工作在之前的文章已经说过了,播放器也是一个vi ...
iOS AVPlayer视频播放器
代码地址如下: http://www.demodashi.com/demo/11168.html 一.运行效果二.实现过程 ①.创建播放器avPlayer //创建播放器url = [url str ...
Android Video Player. 安卓视频播放器，封装 MediaPlayer、ExoPlayer、IjkPlayer。模仿抖音，悬浮播放，广告播放，列表播放，弹幕
DKVideoPlayer 项目地址:dueeeke/DKVideoPlayer 简介: Android Video Player. 安卓视频播放器,封装 MediaPlayer.ExoPlayer. ...