[TOC]
A <VLCPlayer>
component for react-native
此项目 参考react-native-video,
react-native-vlcplayer,
react-native-vlc-player
VLCPlayer 支持各种格式(mp4,m3u8,flv,mov,rtsp,rtmp,etc.),具体参看vlc wiki
Run npm install react-native-yz-vlcplayer --save
android vlc-sdk 库来源:https://github.com/mengzhidaren/Vlc-sdk-lib
Run react-native link react-native-yz-vlcplayer
整合 react-native-vlcplayer 而来。
Run react-native link react-native-yz-vlcplayer
1.安装MobileVLCKit.framework
(1)在nightlies.videolan.org/build/iOS/ 下载最新版,
(2)在你的项目目录下新建一个 vlcKit 文件夹,并将MobileVLCKit.framework解压到该目录下
(3)在你的工程里面引入MobileVLCKit.framework
(4)添加 framework search path $(PROJECT_DIR)/../vlcKit
(5)Enable Bitcode 设置为no
Build Settings ---> 查询 Bitcode
(6)设置工程deployment target 为 9.3
需要用到 npm install react-native-orientation --save
,工程配置参看https://github.com/yamill/react-native-orientation
seek(seconds)
this.vlcplayer.seek(100); //单位是 ms
this.vlcPlayer.resume(autoplay) //重新加载视屏进行播放,autopaly: true 表示播放 false表示暂停
import { VLCPlayer, VlCPlayerView } from 'react-native-yz-vlcplayer';
import Orientation from 'react-native-orientation';
//插件参数说明
(1) 静态方法
this.vlcplayer.seek(100); //调整播放进度,单位是ms
(2)
<VLCPlayer
ref={ref => (this.vlcPlayer = ref)}
style={[styles.video]}
/**
* 增加视屏宽高比,视屏将按照这个比率拉伸
*/
videoAspectRatio="16:9"
/**
* 是否暂停播放
*/
paused={this.state.paused}
/**
* 资源路径
* 暂不支持本地资源
*/
source={{ uri: this.props.uri}}
/**
* 进度
* 返回 {currentTime:1000,duration:1000}
* 单位是 ms
* currentTime: 当前时间
* duration: 总时间
*/
onProgress={this.onProgress.bind(this)}
/**
* 视屏播放结束
*/
onEnd={this.onEnded.bind(this)}
/**
* 正在缓存中
*/
onBuffering={this.onBuffering.bind(this)}
onError={this._onError}
/**
* 视屏停止
*/
onStopped={this.onStopped.bind(this)}
/**
* 视屏播放
*/
onPlaying={this.onPlaying.bind(this)}
/**
* 视屏暂停
*/
onPaused={this.onPaused.bind(this)}
/>
(3)简单例子
<VlCPlayerView
autoplay={false} //视屏播放结束时调用this.vlcPlayer.resume(false)方法
url={this.state.url} //视屏url
Orientation={Orientation}
//BackHandle={BackHandle}
ggUrl="" // 广告url
showGG={true} // 是否显示广告
showTitle={true} // 是否显示标题
title="" // 标题
showBack={true} // 是否显示返回按钮
onLeftPress={()=>{}} // 返回按钮点击事件
startFullScreen={() => {
this.setState({
isFull: true,
});
}}
closeFullScreen={() => {
this.setState({
isFull: false,
});
}}
/>
MIT Licensed
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。