Poster and Video being displayed

[tscrip]

Current behavior

When using a Video Element along with the poster prop, I am getting both displayed instead of one or the other. This was not a problem with the last version of the player.

Reproduction steps

Create React Code like this:

<Video source={{ uri: videoURI }}
                style={{ flex: 1, height: 200 }}
                paused={this.state.paused}
                controls={true}
                poster={posterURI}
            />

Expected behavior

I would expect the poster to be displayed until you click the play button. On clicking play, it would hide the poster and start the video.

Platform

Which player are you experiencing the problem on:

• iOS

[shwanton]

Seeing this same issue on 4.4.0 iOS and android.

When the audioOnly and poster prop are present, both the player and poster are rendered in a stack.

[faisal3413]

I'm not using audioOnly prop, but still both poster and video rendering.

    <View style={styles.fullScreen}>
        <Video
          source={{ uri: videoObj.VideoUrl }} 
          style={{ width, height: (height/2), top: isAndroid ? 150 : 200 }}
          rate={this.state.rate}
          paused={this.state.paused}
          volume={this.state.volume}
          muted={this.state.muted}
          ignoreSilentSwitch={this.state.ignoreSilentSwitch} 
          resizeMode={this.state.resizeMode}
          onLoad={this.onLoad}
          onBuffer={this.onBuffer}
          onProgress={this.onProgress}
          onEnd={() => this.props.dispatchQuitFullScreenVideo()} 
          repeat={true}
          poster={videoObj.ImageUrl}
          posterResizeMode={'cover'}
        />
      </View>

[jennya]

Also a problem for me. @tscrip what version didn't have this problem? I can repro it on 4.0.1

[mdermksian]

I'm also having this problem after updating to 4.3.1 or 4.4.0. Anyone figure out a workaround? Unfortunately, I don't think showing just the black box will be a popular option.

[JoeM-RP]

As a workaround, we wrapped the video player in a view and added an <Image> in on top of it, like so:

  renderPoster() {
    if (this.state.paused && this.elapsedTime === 0) {
      return (
        <Image
          style={styles.videoPoster}
          source={this.videoPosterUrl}
          resizeMode="contain"
        />
      );
    } else {
      return (null);
    }
  }

  render() {
    return (
          <View style={styles.videoComponent}>
            <Video
              ref={(ref) => { this.videoRef = ref; }}
              style={styles.nativeVideoControls}
              source={this.props.source}
              paused={this.state.paused}
              resizeMode="contain"
              onProgress={this.onProgress}
              onEnd={this.onEnd}
              onError={this.onError}
              onLoad={this.onLoaded}
              ignoreSilentSwitch="ignore"
            />
            { this.renderPoster() }
          </View>
    );
  }

Styles look like this, for reference:

const ASPECT_RATIO = 16 / 9;

const styles = StyleSheet.create({
  nativeVideoControls: {
    top: 0,
    height: '100%',
  },
  videoComponent: {
    width: '100%',
    height: 'auto',
    minWidth: '100%',
    aspectRatio: ASPECT_RATIO,
    backgroundColor: COLORS.BLACK,
  },
  videoContainer: {
    height: 'auto',
  },
  videoPoster: {
    top: 0,
    width: '100%',
    minWidth: '100%',
    height: 'auto',
    aspectRatio: ASPECT_RATIO,
    position: 'absolute',
    backgroundColor: COLORS.WHITE,
  },
});

[mdermksian]

Awesome, thanks, we'll take this approach too

[oliverdolgener]

We're facing the same issues after upgrading from 3.2.1 to 4.4.0. Maybe it has something to do with this commit : 95cea76

[mehdi-satei]

Same issue here. Any update on this?

[jenshandersson]

Reason seems to be a view wrapping the poster, undoing the absolute positioning of it. And the wrapper takes the style from nativeProps...

<React.Fragment>
  <RCTVideo ref={this._assignRoot} {...nativeProps} />
  {this.props.poster &&
    this.state.showPoster && (
      <View style={nativeProps.style}>
        <Image style={posterStyle} source={{ uri: this.props.poster }} />
      </View>
    )}
</React.Fragment>

Here is my temporary fix, let me know if this fixes other peoples issues. I can submit a PR over the weekend.

<View style={{ height: width * 9 / 16, width: '100%' }}>
  <Video
    source={{ uri: video.url }}
    style={StyleSheet.absoluteFillObject}
    poster={video.poster}
  />
</View>

(By setting absolute position on the Video the "poster wrapper" becomes absolute as well.

Looks like it was introduced 9 months ago 55e0e4d

[akhilsanker]

Same issue.
But in iOS the poster will disappear when the video loads.

iOS

1. Before playing the video

2. After video loads

### Android

1. Before playing the video

2. After video loads

My code is as follows:

  <Video source={{uri: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}}
    poster = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
    repeat= {true}
    resizeMode= {"cover"}
    posterResizeMode = {"cover"}
    pictureInPicture= {true}
    style={{flex: 1, width: '100%',	margin: 'auto',	height: language.IS_IPAD == 1 ? 400 : 200,}}

@tscrip, @cobarx Do you have any workaround?
Thanks

[jenshandersson]

@akhilsanker I just submitted a PR, can you try it out and see if that fixes your issue?
@tscrip @cobarx let me know if you like this solution, basically reverting the bug introduced in #1167

[akhilsanker]

Hi @jenshandersson ,
It works! Thanks for your solution.

[CHaNGeTe]

Fixed on 4.4.2

[CaptainJeff]

Thanks @JoeM-RP that worked for me as this is still an issue in 4.4.2

[martinop]

This is still an issue in 5.0.2

[jariwalabhavesh]

I feel like in audioonly mode it is fooling users. Video keeps playing and only poster stays at the top. There should be actual implementation which doesn't use bandwidth for video only use audio bandwidth when audio-only flag is set.

Then audio only is only meaningful when there is bandwidth saving to switch from video to audio. But in current player implementation both mode use same bandwidth.