1.0.0 • Published 2 years ago

react-native-mo-video-player v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

Mo-Video-Player

npm version npm downloads npm licence Platform

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

PropTypeOptionalDefaultDescription
titlestringsYes''title of video
sourceobjectNonullsource of video ex: source={{uri:'video-url'}}
posterstringsYes''video poster uri
styleobjectYes{alignSelf:'center', height:200, width:330,}style of video
playlistarray of bojectsYes[]add playlist to video
autoPlaybooleanYesfalsemake vide autoPlay
playInBackgroundbooleanYesfalsemake vide play when app in background
showHeaderbooleanYestrueshow video header
showCoverButtonbooleanYestrueshow cover on video frame to hide video picture
showFullScreenButtonbooleanYestrueshow full screen button in video header
showSettingButtonbooleanYestrueshow setting button to update video settings like speed, sound volume and quality
showMuteButtonbooleanYestrueshow mute button to mute video sound
showSeeking10SecondsButtonbooleanYestrueshow increase and decrease 10 seconds buttons