1.0.1 • Published 4 years ago
@zikwall/re-player v1.0.1
Common | Adaptive | Live Streaming |
---|---|---|
Features
- Easy Customizable: events, icons components, other
props
. - Light Animated & Responsive Components
- Controls & UI:
- Play/Pause & with BigPlay
- Volume with adaptive icons depending on the sound level &
onPress
for mute/unmute. - Crop (resize mode).
- Full-screen mode.
- Overlay Sidebar: You can set you custom content in side bar, e.g. playlist or related videos.
- Lock: You can lock the control buttons and not show them.
- Back from full-screen.
- Title component on full-screen, e.g. text or text with image.
- Custom Events
- On double taps left/right.
- On double taps video transform to full-screen, one tab set visible controls.
- Intercepts a standard gesture/button back during full-screen mode to exit it.
- e.g.
onFullscreen
,onPause
/onPlay
, etc.
- Video types
- Stream/Online without time controls & mark
live
. - Video ends with time controls & dynamic formatted (
h:i:s
) duration times (current, end).
- Stream/Online without time controls & mark
Props
source
array of object { size: int, src: string }title
stringnativeProps
object, available native react-native-video propsprogressComponent
component, to set the loading status
Future todo
playlist
, see Playlist BranchfullscreenEnabled
hardwareEnabled
overlayEnabled
lockEnabled
doubleTapFullscreenEnabled
doubleTapSeekEnabled
statusBarMode
adTag
, wait PR: #1839
Events
onEventLoadStart()
onEventLoad(videoData)
onEventProgress(currentTime)
onEventCrop(mode)
onEventSeek(value)
onEventDoubleTapSeek(seekValue, direction)
, direction one ofleft
,right
onEventFullscreen(isFullscreen)
onEventDoubleTapFullscreen(isFullscreen)
onEventPlayPause(isPaused)
onEventLock(isLocked)
onEventMute(isMuted)
onEventVolumeChange(volumeValue)
onEventAudioBecomingNoisy()
onEventAudioFocusChanged(hasAudioFocus)
onEventHardwareBackPress(isFullscreen)
onEventOverlayClose()
onEventOverlayOpen()
onEventShowControls
Installation
Before install dependencies
prop-types
react-native-video
, see manual: https://github.com/react-native-community/react-native-videoreact-native-orientation
, see manual: https://github.com/yamill/react-native-orientationreact-native-vector-icons
, see manual: https://github.com/oblador/react-native-vector-icons@react-native-community/slider
, see manual: https://github.com/react-native-community/react-native-sliderreact-native-typography
, see manual: https://github.com/hectahertz/react-native-typography
Install RePLayer
npm i @zikwall/re-player
- from git add
package.json
next line:"@zikwall/re-player": "git+https://git@github.com/zikwall/re-player.git"
Usage is very simple
import React from 'react';
import {
View,
} from 'react-native';
import RePlayer from '@zikwall/re-player';
const App = () => {
return (
<RePlayer
source={[
{
size: 576,
src: 'http://ultotv.ru:8888/live/uhd/playlist.m3u8'
},
{
size: 720,
src: 'https://previews.customer.envatousercontent.com/h264-video-previews/01940919-82fb-43b7-b688-b585f0a0abe9/2158627.mp4'
},
{
size: 1080,
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
},
{
size: 1080,
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
}
]}
title={'Test'}
nativeProps={{
poster: 'https://raw.githubusercontent.com/zikwall/re-player/master/screenshots/re-player-poster-2.png'
}}
/>
)
}
16:9 aspect ratio example
// ...
return (
<View style={{ paddingTop: '56.25%' }}>
<View style={{
position: 'absolute',
left: 0,
right:0,
bottom: 0,
top: 0,
backgroundColor: '#000'
}}>
<RePlayer
{...playerProps}
/>
</View>
</View>
)
// ...
Screenshots
General | Fullscreen |
---|---|