react-native-video: Version 4.4.4 IOS14 has the wrong video screen size.

Issue:

 _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
 _playerLayer.frame = self.bounds;
 _playerLayer.needsDisplayOnBoundsChange = YES;

“_playerLayer” is slow to create, causing the video screen to deform.

I fixed the problem temporarily with code.

append：

 -(void)touchPlayerLayer{
      if(!_player)return;
      if(_playerLayer)return;
      
      _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
      _playerLayer.frame = self.bounds;
      _playerLayer.needsDisplayOnBoundsChange = YES;
      
      [self.layer addSublayer:_playerLayer];
      self.layer.needsDisplayOnBoundsChange=YES;
  }

modify:

- (void)usePlayerLayer
{
  if( _player )
  {
    [self touchPlayerLayer];  ++++++
    
    
    // to prevent video from being animated when resizeMode is 'cover'
    // resize mode must be set before layer is added
    [self setResizeMode:_resizeMode];
    [_playerLayer addObserver:self forKeyPath:readyForDisplayKeyPath options:NSKeyValueObservingOptionNew context:nil];
    _playerLayerObserverSet = YES;
    
    [self.layer addSublayer:_playerLayer];
    self.layer.needsDisplayOnBoundsChange = YES;
    #if TARGET_OS_IOS
    [self setupPipController];
    #endif
  }
}

modify:

 _player = [AVPlayer playerWithPlayerItem:_playerItem];
[self touchPlayerLayer]; +++++
_player.actionAtItemEnd = AVPlayerActionAtItemEndNone;

We hope to fix it as soon as possible. Thanks.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 23
Comments: 32

Commits related to this issue

Fixed IOS14 has the wrong video screen size Add changes of https://github.com/react-native-community/react-native-video/issues/2159#issue-707109899 — committed to chuyvad/react-native-video by deleted user 4 years ago

Most upvoted comments

@foxempire

Hi ! Which file did you modify ?

coschmit on Sep 23, 2020

Yesterday iOS 14.1 released, the video is fixed now. Just update.

antoarva on Oct 21, 2020

please fix for all version of iOS. Still not working for iOS 14.4

nmhoan76 on Feb 9, 2021

This is working as a temporary solution. But if you have poster, you will not see the video, poster will go on top of the video. 🙁 I guess something similar is happening with controls as well.

dackom on Sep 23, 2020

Is there any update on this?

roldev on Mar 31, 2021

iOS 14.1 fixed for me. (iPhone XS Max with 14.1 and iPhone XR with 14.1)

luisfuertes on Oct 27, 2020

@lluis-sancho - This patch works for us:

diff --git a/node_modules/react-native-video/ios/Video/RCTVideo.m b/node_modules/react-native-video/ios/Video/RCTVideo.m
index 8780f48..806a706 100644
--- a/node_modules/react-native-video/ios/Video/RCTVideo.m
+++ b/node_modules/react-native-video/ios/Video/RCTVideo.m
@@ -383,6 +383,7 @@ - (void)setSrc:(NSDictionary *)source
       }
       
       self->_player = [AVPlayer playerWithPlayerItem:self->_playerItem];
+      [self touchPlayerLayer];
       self->_player.actionAtItemEnd = AVPlayerActionAtItemEndNone;
       
       [self->_player addObserver:self forKeyPath:playbackRate options:0 context:nil];
@@ -1410,13 +1411,23 @@ - (void)usePlayerViewController
   }
 }
 
+-(void)touchPlayerLayer{
+    if(!_player)return;
+    if(_playerLayer)return;
+    
+    _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
+    _playerLayer.frame = self.bounds;
+    _playerLayer.needsDisplayOnBoundsChange = YES;
+    
+    [self.layer addSublayer:_playerLayer];
+    self.layer.needsDisplayOnBoundsChange=YES;
+}
+
 - (void)usePlayerLayer
 {
   if( _player )
   {
-    _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
-    _playerLayer.frame = self.bounds;
-    _playerLayer.needsDisplayOnBoundsChange = YES;
+    [self touchPlayerLayer];
     
     // to prevent video from being animated when resizeMode is 'cover'
     // resize mode must be set before layer is added

kmcmanimen on Oct 22, 2020

The fix is working, but it breaks the callback onReadyForDisplay and it may also be breaking other callbacks.

jpmazza on Sep 28, 2020

@coschmit RCTVideo.m

Also confirming the patch is working with latest v5.1.0-alpha8

adamawang on Sep 24, 2020