react-native-mo-video-player

Mo-Video-Player

Mo-Video-Player is react native video player which support many features and work at android & ios

Features

1- Playback speed
2- Full screen (landsacpe mode)
3- Sound volume
4- Playlist
5- Quality
6- Mute
7- Poster
8- Title
9- Seek +10 , -10 seconds
10- AutoPlay
11- Play in background
12- Video covering

Demo

https://res.cloudinary.com/usefmahmud/video/upload/v1637157676/mo-player/video2.mp4

Install

npm i --save react-native-mo-video-player
npm i --save react-native-orientation-locker
npm i --save react-native-sliders
npm i --save react-native-video

Usage

import MoVideoPlayer from 'react-native-mo-video-player';

const App = () => {
  return (
    <View style={{flex:1,}} >
       <MoVideoPlayer 
         style={{width:dimension.width, height:250, marginTop:Platform.OS=='ios'?30:0,}}
         source={{uri: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}}
         poster='https://pbs.twimg.com/media/FDX7UCbVcAUcNXj.jpg'
         title='React Native MO-VIDEO-PLAYER'
         autoPlay={false}
         playInBackground={false}
         playList={[
           {
             url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4',
             poster: 'https://www.carage.net/media/halfhd/carage_fahrzeuge_square_8.jpg',
             title:'Video 1'
           },
           {
             url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4',
             poster: 'https://carsguide-res.cloudinary.com/image/upload/f_auto%2Cfl_lossy%2Cq_auto%2Ct_default/v1/editorial/story/hero_image/1908-Ford-Model-T_0.jpg',
             title:'Video 2'
           },
           {
             url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4',
             poster: 'https://merriam-webster.com/assets/mw/images/article/art-wap-article-main/surfing-dog-photo-is-fun[e-mail]',
             title:'Video 3'
           },
           {
             url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
             poster: 'https://wikiimg.tojsiabtv.com/wikipedia/en/6/6f/War_official_poster.jpg',
             title:'Video 4'
           },
           {
             url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
             poster: 'https://www.alsharqtoday.com/wp-content/uploads/2020/09/%D8%A7%D9%84%D8%AC%D9%84%D9%8A%D8%AF.jpg',
             title:'Video 5'
           },
           {
             url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
             poster: 'https://pbs.twimg.com/media/FDX7UCbVcAUcNXj.jpg',
             title:'Video 6'
           },
         ]}
         showHeader={true}
         showSeeking10SecondsButton={true}
         showCoverButton={true}
         showFullScreenButton={true}
         showSettingButton={true}
         showMuteButton={true}
       />
    </View>
  );
};

Props

Prop	Type	Optional	Default	Description
title	strings	Yes	''	title of video
source	object	No	null	source of video ex: source={{uri:'video-url'}}
poster	strings	Yes	''	video poster uri
style	object	Yes	{alignSelf:'center', height:200, width:330,}	style of video
playlist	array of bojects	Yes	[]	add playlist to video
autoPlay	boolean	Yes	false	make vide autoPlay
playInBackground	boolean	Yes	false	make vide play when app in background
showHeader	boolean	Yes	true	show video header
showCoverButton	boolean	Yes	true	show cover on video frame to hide video picture
showFullScreenButton	boolean	Yes	true	show full screen button in video header
showSettingButton	boolean	Yes	true	show setting button to update video settings like speed, sound volume and quality
showMuteButton	boolean	Yes	true	show mute button to mute video sound
showSeeking10SecondsButton	boolean	Yes	true	show increase and decrease 10 seconds buttons