abbasfreestyle / react-native-af-video-player Goto Github PK

Hi,
How can I make my video component overlap the status bar,
I want the status bar will be on-top/overlap the top row of my video

Thanks

Hi @abbasfreestyle,

1. Sometimes when toggling from full screen to inline I see black bars above and below the video, as if the video does not fill the entire videoContainer.
2. The video container not always returning to inline, as if the height of the container does not update in time :(

Did you encounter this issues?
I have to say I did not use the package as blackBox but used parts of it and change few things - like icons, video cover, error etc.

Hi, when I click on full screen, it does not cover the navbar

return(
<SideMenuDrawer ref={(ref) => this._sideMenuDrawer = ref}>
<Container style={{backgroundColor: '#fdfdfd'}}>

<Video url={'https://your-url.com/video.mp4'}
style={{ width: Dimensions.get('window').width, height: 200}}/>


);

when I finish the video page in my APP,I found the other pages can also rotate ,I think you should remove the orientation listener when the conponent unmount in the video page so that it will not influence on the other pages

In fullscreen mode the bottom ControlBar( toggle, fullscreen, slider, volume control) is not displayed. Pause, title ui elements are shown.

Here are some common things to include that can help your issue be diagnosed.

• react-native-af-video-player version: 0.1.9

• React Native version: 0.55.2

• OS: mac 10.13.4

• Has this issue already been raised? No

• Have you clearly read and understood the Readme? Yes

• Code and explanation to replicate this issue:
  <VideoPlayer
  url={ s3Url }
  autoPlay={ true }
  onLoad={ this.onLoad }
  onProgress={ this.onProgress }
  onEnd={ this.onEnd }
  onError={ this.onError }
  ignoreSilentSwitch={ "ignore" }
  onFullScreen={ this.onFullScreen }
  title={ video.title }

            />
  

  This is inside a React StackNavigator.

• Are there any console logs?

• Include Screeshots / Video:

After fullscreen is disabled you are calling Orientation.unlockAllOrientations(), but my App generally is locked to Portrait, which causes it to bounce around.
Maybe you could add an lockTo option.
Anyways, thanks a lot for the project, keep it up

in iOS while in full screen the video controls are hidden by the parent component and are not "moving" to the front.
on Android its working fine

UPDATE
I change zIndex of the siblings and parent components to fix this issue.

Hi I have noticed I am unable to skip through the video when I want to go to a certain part of the video, instead it will just start from the beginning again.

many of our Videos are local, so our Thumbnails are aswell.
your thumbnails source uses "uri:" but we need "require:" for our project, do you have any idea how to fix that problem?

would I have to add support for .srt or .vtt subtitles?

sorry for my bad english

When creating an issue, please ensure that you provide as much information as you can. Issues with a basic description will sadly be ignored as it doesn't help diagnose the issue :(

If you don't help me, I can't help you ¯\_(ツ)_/¯

Here are some common things to include that can help your issue be diagnosed.

• react-native-af-video-player version:

• React Native version:

• OS:

• Has this issue already been raised?

• Have you clearly read and understood the Readme?

• Code and explanation to replicate this issue:

• Are there any console logs?

• Include Screeshots / Video:

Is there any way to control the preloading of the video,
hopefully you can give me a suggestion, thanks

I am just using a simple demo example provided in this repo.

• [ ^0.1.9 ] react-native-af-video-player version:

• [ 0.54.4 ] React Native version:

• [ MacOs 10.13.4] OS:

• [No ] Has this issue already been raised?

• [ Yes] Have you clearly read and understood the Readme?

• Code and explanation to replicate this issue:

• Are there any console logs?

• Include Screeshots / Video:
  

My example code

import React, {Component} from "react";
import { StyleSheet, View } from "react-native";
import Video from "react-native-af-video-player";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  }
});

const uri = "http://techslides.com/demos/sample-videos/small.mp4"

export default class DemoVideo extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Video url={uri} />
      </View>
    )
  }
}

"react-native": "0.54.1",
"react-native-af-video-player": "^0.2.0",
OS : windows 10

i am getting these sometimes when full screen pressed sometimes

1)Warning:Failed prop type: Invalid prop color supplied to Icon.
in Icon (at Video.js:316)

2)Warning: Failed prop type: Invalid prop color supplied to Text: [object Object]
Valid color formats are

• '#f0f' (#rgb)
• '#f0fc' (#rgba)
• '#ff00ff' (#rrggbb)
• '#ff00ff00' (#rrggbbaa)
• 'rgb(255, 255, 255)'
• 'rgba(255, 255, 255, 1.0)'
• 'hsl(360, 100%, 100%)'
• 'hsla(360, 100%, 100%, 1.0)'
• 'transparent'
• 'red'
• 0xff00ff00 (0xrrggbbaa)

Bad object: {
"fontSize": 60,
"color": {
"title": "#FFF",
"more": "#FFF",
"center": "#FFF",
"fullscreen": "#FFF",
"volume": "#FFF",
"scrubberThumb": "#FFF",
"scrubberBar": "#FFF",
"seconds": "#FFF",
"duration": "#FFF",
"progress": "#FFF",
"loading": "#FFF"
},
"fontFamily": "MaterialIcons",
"fontWeight": "normal",
"fontStyle": "normal"
}
in Text (at create-icon-set.js:82)
in Icon (at Video.js:316)

3)TypeError: Cannot read property 'seek' of null
This error is located at:
in Video

Hi,
I was looking for a video package with fullScreen solution.
react-native-video was almost good enough, and this package looks like the package for me.
Just one question, how can I use my icons - play, pause, fullScreen, existFullScreen instead of the one the package is using?

As I understood, you handle full screen with styles, right?

fullScreen: {
   ...StyleSheet.absoluteFillObject
 },
 inline: {
   height: Win.width * 0.5625,
   alignSelf: 'stretch'
 },

The component is called in here with Video props:

<View style={{ flex: 1 }}>
<VideoPlayer
video={{
name: 'video file',
poster: 'poster',
videoStyle: styles.backgroundVideo
}}
/>

Styles:
backgroundVideo: {
position: 'relative',
top: 0,
left: 0,
bottom: 0,
right: 0,
width: null,
height: 200
}

The video player:

class VideoPlayer extends Component {
render() {
return (

export default VideoPlayer;

When I click the fullscreen button in controls, then I get the behaviour you see in the image.

• react-native-af-video-player version: @0.1.7
• React Native version:@0.53.3
• OS: Both Android and iOS
  
  

Thanks in advance, really appreciated

Hi when i try to load from local storage i get a blank video player

<Video source={require('../video/video.mp4')}

I can play Vertical Video and it goes to FullScreen if i press the Button, but if i set fullScreenOnly, it automatically rotates.
I want it to go FullScreen without Rotation?

When compiling the player using react-native and minify enabled the minifier removes (default option) all function names. This leads to an issue using the fullscreen scrolling view:

1. Compile without (!) --minify

2. Start fullscreen within provided scrollview => Working

3. Compile with --minify

4. Start fullscren within provided scrollview => NOT working

Quickfix: Disable function name mangling inside the minifier node module:

In node_modules/uglifyjs-webpack-plugin/dist/uglify/minify.js

...
function minify(inputCode, inputMap) {
  const result = uglify.minify(inputCode, {
  keep_fnames: false
...

This is a very cool package, is it ready for release?

hi,
Is it possible to refactor onScroll method in the custom ScrollView -
I want to be able to connect the scrolling to an animation header, same as it is done here or here the scrollView.

the onScroll method is:

<RNScrollView
        {...scrollProps}
        ref={(scroll) => { this.scroll = scroll }}
        bounces={fullscreen ? !fullscreen : bounces}
        onScroll={(event) => {
          if (!fullscreen) this.scrollPos = event.nativeEvent.contentOffset.y
          onScroll()  <- I don't understand to which onScroll you are calling here
        }}
        scrollEventThrottle={scrollEventThrottle}
      >
        {this.renderChildren(children)}
</RNScrollView>

I am trying to do something like this, the modifications I did in the ScrollView.js are:

1. from:
   import { ScrollView as RNScrollView } from 'react-native';
   to:
   import { Animated } from 'react-native';

2. from:

scrollBackToPosition() {
        if (this.scroll) this.scroll.scrollTo({ y: this.scrollPos, animated: false });
    }

to:

        if (this.scroll) this.scroll.scrollTo({ y: this.props.scrollY, animated: false });
    }

3. from:

render() {
    const { fullscreen } = this.state
    const {
      bounces,
      children,
      onScroll,
      scrollEventThrottle,
      ...scrollProps
    } = this.props
    return (
      <RNScrollView
        {...scrollProps}
        ref={(scroll) => { this.scroll = scroll }}
        bounces={fullscreen ? !fullscreen : bounces}
        onScroll={(event) => {
          if (!fullscreen) this.scrollPos = event.nativeEvent.contentOffset.y
          onScroll()
        }}
        scrollEventThrottle={scrollEventThrottle}
      >
        {this.renderChildren(children)}
      </RNScrollView>
    )
  }

to:

render() {
        const { fullscreen } = this.state;
        const {
            bounces,
            children,
            onScroll,
            scrollEventThrottle,
            scrollY, <- passed from out side, `scrollY: new Animated.Value(0)`
            ...scrollProps
        } = this.props;
        return (
            <Animated.ScrollView
                {...scrollProps}
                styles={{ flex: 1 }}
                ref={(scroll) => { this.scroll = scroll; }}
                bounces={fullscreen ? !fullscreen : bounces}
                onScroll={Animated.event(
                    (!this.state.fullScreen)
                        ? [{
                            nativeEvent: { contentOffset: { y: scrollY } },
                        }]
                        : undefined,
                    onScroll(),
                )}
                scrollEventThrottle={scrollEventThrottle}
            >
                {this.renderChildren(children)}
            </Animated.ScrollView>
        );
    }

But for some reason the content of the scrollView is visible and the video element is "behind" it - at least half a screen.
One important thing to say, the video is place outside of the scroll view, so maybe I don't need the custom scroll view?

• [ 0.1.7] react-native-af-video-player version:

• [ 0.51.0] React Native version:

• [ xcode 9.1] OS:

• [ no] Has this issue already been raised?

• [yes ] Have you clearly read and understood the Readme?

• Code and explanation to replicate this issue:

• Are there any console logs?

• Include Screeshots / Video:
  
  Facing an issue while playing video on iOS..

My progress bar is not visible in Android :(
on iOS its working fine.
I did not touched your code regarding the progress bar

UPDATE
it started to work

• react-native-af-video-player version: 0.1.9

• React Native version: 0.55.2

• OS: mac OS

• Has this issue already been raised? I haven't seen it yet.

• Have you clearly read and understood the Readme? Yes, specifically, https://github.com/abbasfreestyle/react-native-af-video-player#fullscreen-videos-inside-a-scrollview

• Code and explanation to replicate this issue:

    <ScrollView style={{ flex: 1 }}>
        <Text>{"Text message"}</Text>
        <Container>
          {this.state.url != null ? (
            <Video
              url={this.state.url}
              rotateToFullScreen={true}
              lockPortraitOnFsExit={true}
            />
          ) : (
            <View />
          )}
        </Container>
        {this.state.url != null ? (
          <Video
            url={this.state.url}
            rotateToFullScreen={true}
            lockPortraitOnFsExit={true}
          />
        ) : (
          <View />
        )}
        <Text>{"Text message"}</Text>
      </ScrollView>

Explanation:
I am trying to use scrollview to include multiple videos in my view. Including the videos works awesome! Thanks for your awesome component. The problem that I am facing is more towards full screen of the videos. Like in the images attached (the third screen shot) below, you can see that when I click on the full screen button on the second video, the first one gets full screen and the other one is played.

Though the result that I would expecting was the other way round. Any help on that matter would be well appreciated.

Thanks.

• Are there any console logs?

• Include Screeshots / Video:

Video:
SampleVideo.mp4.zip

Hello everyone!

I'm trying to use seek, but it's not working so well.

On the first try, i simply tried to use seek this way.

<Video 
    url={props.video.signedUrl}
    title={props.video.title}
    ref={(ref) => {this.video = ref}}
    onFullScreen={status => this.onFullScreen(status)}
    rotateToFullScreen
/>

<Button onPress={() => this.video.seek(20)}> seek </Button>

But when i do this, the player go to a very high (above the duration) number of seconds, so i tried to see the implementation to understand what was going on and i saw this:

 seek(val) {
    const currentTime = val * this.state.duration
    this.setState({ seeking: true, currentTime })
  }

I confess that i don't understand why multiply val by duration of video. So i tried to make a modification and use react-native-video seek

 seek(val) {
    const currentTime = val * this.state.duration
    this.player.seek(val)
    this.setState({ seeking: true, currentTime })
  }

Worked in some way. On click, i was able to seek the video though the expected time, but the timer in controls got stucked in this expected time.

So, i'm missing something? I went wrong somewhere? How do i properly seek?

Thanks in advance and congratulations on this work, this is the best react-native player that i worked so far 😄

• react-native-af-video-player version: 0.1.9
• react-native version: 0.48.3
• Android 8.0 via Android Virtual Device

See title.

This is the only video playing library i have besides react-native-video, any suggestions as to why i'm getting this error?

How to make the video page keep fullscreen mode and hide the fullscreen button default when I enter it?I use the 'fullScreenOnly',but it cannot solve the problem.
Here is my code:
<Video
url={url}
title={title}
//logo={logo}
placeholder={placeholder}
fullScreenOnly={true}
//theme={'#DB3843'}
lockPortraitOnFsExit
/>

Old : How to solve this problem
BVLinearGradient does not exist

Revision : Can this plugin open Youtube Video from Youtube URL ?

Hey, I was wonder could you add a double tap on the left/right sides of the video player, that would skip/rewind the video 5 second

When creating an issue, please ensure that you provide as much information as you can. Issues with a basic description will sadly be ignored as it doesn't help diagnose the issue :(

If you don't help me, I can't help you ¯\_(ツ)_/¯

Here are some common things to include that can help your issue be diagnosed.

• react-native-af-video-player version: 0.1.7

• React Native version: 0.50

• OS: OS-X

• Has this issue already been raised? No

• Have you clearly read and understood the Readme? Yes

• Are there any console logs? No

• Code and explanation to replicate this issue: Just the default example code, but no video is working.

• Include Screeshots / Video:
  

When creating an issue, please ensure that you provide as much information as you can. Issues with a basic description will sadly be ignored as it doesn't help diagnose the issue :(

If you don't help me, I can't help you ¯\_(ツ)_/¯

Here are some common things to include that can help your issue be diagnosed.

• react-native-af-video-player version: 0.19

• React Native version: React Native version: 0.50

• OS: OS-X

• Has this issue already been raised? No

• Have you clearly read and understood the Readme? Yes

• Code and explanation to replicate this issue: The Autoplay does not trigger.
  

• Are there any console logs? No

• Include Screeshots / Video:
  

First try and this happened. I just copy paste your sample code.

"react": "16.3.1",
"react-native": "0.55.3",
"react-native-af-video-player": "^0.1.9",
OS : window 10. Test on Emulator Nexus 5 Api 23

Hi There,

Is there any callback method when video is ended or unable to play the video ?

Thanks

placeholder issues:
I am passing an image to the package to "play" as a placeholder but:
In IOS device it is placed under the video component and no inside.
in Android it does not visible at all.

I want that the first image of a video will be the placeholder, the videos are stored on the cloud.
I tried to save the first image locally for that.
Or the package takes the 1st image of the video automatically?

OR why not use poster of react-native-video

SOLVED
I just updated image style in Video.js:

image: {
        ...StyleSheet.absoluteFillObject,
        width: '100%', // <- added
        height: '100%', // <- added
        zIndex: 99,
},

Great package!!

would be really useful, so i can stop other videos when a new one starts playing. right now i am using onProgress for this, which is not a very clean solution.

Hi @abbasfreestyle ,
I'd like to recommend small update that can improve application performance when using this package.
Once again, great package...I am using it and its solved my fullScreen issue
I think that the rendering should be done like this:

renderVideoCover() {
  ...render the video cover with play button and all the styling
}

renderVideoPlayer() {
  ...render the video player and controls
}

render() {
  if (showVideoCover) return this.renderVideoCover();
  return this.renderVideo();
}

That way when the app navigate to a screen with the video component it won't try to fetch the video immediately but only after the user tap the play button.

This will:

1. reduce the amount of video fetching - reduce data transfer.
2. in case of an error, for example network error - will show the error just after the user tap the play button and not when the user navigate to a screen with the video component.

it works?

Need more callback interfaces.
onLoad
onEnd
onProgress
...

thanks a lot!!!

Hello, there.
I am very fine to find this.
But I have one question about using this.
Please let me know what video format this support.
Thank you a lot.

Hi Guys, nice lib. But I'm was testing and android worked fine, but IOS I get this error when click over the video (play or pause) . iOS 11.2.

After closing the red screen appears to work fine. ( in debug mode)

"react-native": "0.47.1",
"react-native-af-video-player": "^0.1.3",
"react-native-video": "2.0.0"

Have you faced this problem? Check the image with the original message.

can not use!!!
Invariant violation:View config not found for name BVLinerGradient

• react-native-af-video-player version: ^0.2.1
• React Native version:0.55.4
• OS: iOS && Android

How to hide bottom navigation bar, is there any options to hide it, I have manually hidden other components, but bottom navigation is not hided.

when the full screen button is clicked the onFullScreen is calling many times at one click and showing and hiding the other views is getting problem as I am using onFullScreen function to render my views

I'm need to use my app with chromecast or screeshare like sistems, know you some lib or sdk to do it?

"Error calling RCTEventEmitter.receiveEvent" on IOS react-native

Any suggestions to fix this ?

Hello admin, how can I show fullscreen if the videoplayer component is within scrollview ?
I know u have pointed this issue, but how can I show fullscreen?
Thanks for your awesome video player.

I get this error when trying to play video on android:

On ios it works smoothly. Here's the render function:

render() { return ( <VideoPlayer url={"https://vjs.zencdn.net/v/oceans.mp4"} title={"video"} placeholder={"https://vjs.zencdn.net/v/oceans.png"} /> ) }

• react-native-af-video-player version:1.19
• React Native version: 0.54.0
• OS: ios

Is any one nitce this issue - Android play audio (mp3) fine ios not

Any one can support?

After the full screen, the video is played, and the play button is clicked again. The video can't be played. (Android)

The pause method mentioned in the docs is not working as expected. It does not pause the video when the pause() method is triggered

react-native-af-video-player version: v0.2.0
React Native version: 0.55.4
OS: Android 8.0