-- --
正在获取
我的小世界 新手码农的小世界
做第一个Rn项目遇到的一个组件视频播放器
发表于 2018-4-9 | | APP开发

在做视频Video组建的时候,无意中发现了一个播放器组件,感觉还挺不错的,推荐过来,

不能任意位置拖动进度条,只能在进度条那里拖动,声音只能静音(不能手动调节)

首先放上此项目地址:GitHub 直通车

用法:上面也有,不想去看的我会把那边的都搬过来,顺便翻译一下(英语不好,大概意思翻译一下)

npm i -S react-native-af-video-player(第一步,我电脑死活是不行,只能yarn add react-native-af-video-player)
然后是link组件,如果没有安装过video组件好像会自动安装(没有测试过,自行测试)
react-native link react-native-video
react-native link react-native-keep-awake
react-native link react-native-vector-icons
react-native link react-native-orientation
react-native link react-native-linear-gradient
一定要全部link,如果报错就重新编译。一般就会解决,基本上会是最后一个报错(BVLinearGradientdoes not exist 
用法特别简单,就一个自封闭标签
<Video url={url} />
属性我会在下面详细描述

Props

Prop Type Required Default Description
url string, number Yes A URL string (or number for local) is required.(本地或者网络地址)
autoPlay bool No false Autoplays the video as soon as it's loaded(加载完成后自动播放)
loop bool No false Allows the video to continuously loop(循环播放)
title string No '' Adds a title of your video at the top of the player(顶部视频标题)
placeholder string No undefined Adds an image placeholder while it's loading and stopped at the beginning(加载时一个图像占位符,可以添加loading图)
logo string No undefined Adds an image logo at the top left corner of the video(左上角添加一个小logo图)
theme string No 'white' Adds an optional theme colour to the players controls(播放器主题,改变控件颜色)
style number, object No {} Apply styles directly to the Video player (ignored in fullscreen mode)(样式,全屏下失效)
resizeMode string No 'contain' Fills the whole screen at aspect ratio. contain, cover etc(视频填充效果)
rotateToFullScreen bool No false Tapping the fullscreen button will rotate the screen. Also rotating the screen will automatically switch to fullscreen mode(旋转屏幕会自动全屏)
fullScreenOnly bool No false This will play only in fullscreen mode(全屏下播放)
inlineOnly bool No false This hides the fullscreen button and only plays the video in inline mode(会隐藏全屏按钮,默认false)
playInBackground bool No false Audio continues to play when app enters background.(后台下会一直播放)
playWhenInactive bool No false [iOS] Video continues to play when control or notification center are shown.(ios下拉状态栏会继续播放,默认关闭)
rate number No 1 Adjusts the speed of the video. 0 = stopped, 1.0 = normal(视频播放速度)
volume number No 1 Adjusts the volume of the video. 0 = mute, 1.0 = full volume(音量调整)
onMorePress function No undefined Adds an action button at the top right of the player. Use this callback function for your own use. e.g share link(右上角可以添加一个功能,比如做分享之类的操作)
onFullScreen function No Returns the fullscreen status whenever it toggles. Useful for situations like react navigation.(这个没太理解,抱歉)
onTimedMetadata function No undefined Callback when the stream receives metadata(貌似是做直播流)
scrollBounce bool No false Enables the bounce effect for the ScrollView(没发现什么作用)
lockPortraitOnFsExit bool No false Keep Portrait mode locked after Exiting from Fullscreen mode(没发现什么作用)
lockRatio number No undefined Force a specific ratio to the Video player. e.g. lockRatio={16 / 9}(强制视频按照这个比例)
onLoad function No (data) => {} Returns data once video is loaded(加载视频后返回数据)
onProgress function No (progress) => {} Returns progress data(进度函数)
onEnd function No () => {} Invoked when video finishes playing(播放完成时调用)
onError function No (error) => {} Returns an error message argument(返回错误消息参数)
error boolean, object No true Pass in an object to Alert. Seehttps://facebook.github.io/react-native/docs/alert.html
翻译的一般,还加了百度翻译,我想应该都能看明白
如果要看再详细的请移步该项目自行查看,昨晚在iphone真机上好像会有点卡顿出现,安卓暂未发现,
ios端因为默认是沉浸式展示,所以还未研究怎么隐藏状态栏~,在研究吧之后
项目进度目前就可以了,基本完成了。接下来就是内容的填充了。还有页面完善,敬请期待!

评论:

猪猪侠
2019-02-20 11:44
你好,请问你遇到了这个问题吗Oops! there was an error while playing this video please try again later
乐泰胶水
2018-06-05 14:35
用胶水就用可赛新胶水和乐泰胶水这才是正确的选择https:www.hyhaote.com

发表评论:


GO