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-funner-or-funnest-a-real-word-5670-6d512231d0a52079b0c9fbf474f9a6c9@1x.jpg',
             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