ios - 在ios app ionic 3中将纵向更改为横向时HTML 5视频大小调整不起作用，反之亦然

Question

我们在 ionic 3 项目中使用 HTML 5 视频标签来显示 Webrtc 流。视频播放正常，但是当我们将设备方向从横向更改为纵向或从纵向更改为横向时，视频不会调整大小并适合容器。

但是，如果我们以横向或纵向模式打开应用程序，视频会适合容器并正确调整大小。

我只在 iOS 版本中遇到这个问题。在android中，它工作正常。

下面是我的 HTML、CSS 和 TS 文件：

HTML：

<ion-header>
  <ion-navbar color="light">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title text-center class="tab-title" >{{class_name}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content data-tap-disable="true" overflow-scroll="true" >
  <ion-grid class="video-grid">
    <ion-row>
      <ion-col>          
         <div id="videos-container" style="width:100%;min-height:240px;"></div>           
      </ion-col>
    </ion-row>
  <ion-list>
    <ion-list-header class="live-head" text-wrap>{{room_name}}</ion-list-header>
  </ion-list>
  <ion-segment class="detail-tab" [(ngModel)]="details" color="primary">
    <ion-segment-button value="description">
      Description
    </ion-segment-button>
  </ion-segment>

  <div [ngSwitch]="details">
    <ion-list class="description-bg pad-space" *ngSwitchCase="'description'">
      <ion-item>
        <h6 class="detail-head" *ngIf="room_name">Title</h6>
        <p class="detail-para" text-wrap>{{room_name}}</p>
        <h6 class="detail-head descp" *ngIf="tags">Tag</h6>
        <p class="detail-para">{{tags}}</p>
        <h6 class="detail-head descp" *ngIf="description">Description</h6>
        <p class="detail-para" [hidden]="showless" text-wrap>{{short_description |slice:0:500}}</p>
         <p class="detail-para" [hidden]="showmore" text-wrap>{{description}}</p>
         <div class="showmore-cls" text-right [hidden]="showless" (click)="showmorefunction()" *ngIf="description?.length > 500">Show More</div>
         <div class="showmore-cls" text-right [hidden]="showmore" (click)="showlessfunction()" *ngIf="description?.length > 500">Show Less</div>       
      </ion-item>
    </ion-list>
  </div>
</ion-content>

CSS：

   page-liveroom {
    .item-ios{
        padding-left:0px;
    }
    .item-ios.item-block .item-inner{
        padding-right:0px;
    }
    .search_no_results{
        text-align: center;
    }
    .item-md.item-block .item-inner{
        padding-right:0px;
    }
    .label-md{
        margin:0px
    }
    #videos-container{
        background:#000;
    }
    .list-md{
        margin-bottom:0px !important;
    }
    #videos-container video{ 
        height: 300px;
        width:100%;
    }
    .live-head{
        padding: 0px 8px;
        background-color: #fff;
        margin: 0px;
        font-size: 1.5rem;
        color: #000;
        font-weight: 500;
    }
    .detail-topic{
        padding: 0px 15px;
        background-color: #fff;
        margin: 0px;
        font-size: 1.7rem;
        color: #000;
        font-weight: 500;
    }

    .segment-md-primary .segment-button.activated, .segment-md-primary .segment-button.segment-activated {
        background-color:#012f60;
        color:#fff;
        border-bottom:3px solid #fff;
        border-color:#fff
    }

    .detail-tab{
        background-color:#012f60;
        color:#fff;
        box-shadow:0px 3px 5px #888;
        margin-top:-20px;     
    }

    .segment-md-primary .segment-button{
        color:#fff;
        font-weight:400;
        font-size:1.3rem;
        text-transform:none;
    }

    .item-md{
        padding:0px;
    }

    .description-bg{
        ion-item{
            background-color:#efefef;
        }
        .detail-head{
            color:#012f60;
            font-weight:500;
            font-size:1.3rem;
        }
        .detail-para{
            font-weight:500;
            font-size:1.1rem;
            color:#4c4747;
        }
        .descp{
            margin-top:15px;
        }
        .showmore-cls{
            font-size:11px;
            color:#012f60;
            font-weight:600;
        }
        .ref{
            .label{
                margin-top:0px;
            }
        .ref-material{
            font-size:1.1rem;
            color:#012f60;
            font-weight: 600;
        }
        .ref-img{
            width:15%;
            margin-right:5px;
            float:left;
        }
        .ref-name{
            font-size:11px;
            margin-top:0px;
            color:#0a82c7;
            float:left;
            text-decoration:underline;
        }
    }

    .mar-left{
        padding-left:3px;
    }

    }
    .pad-space{
        padding:10px 10px;
    }
    .detail{
        .label-md{
            margin:0px 8px 13px 0;
        }
    }
    .card-item{
        background-color:transparent;
        padding-left:0px;
        .item-inner{
            padding-right:0px;
        }
        .card{
            margin-left:0px;
            margin-right:0px;
            width:100%;
            margin-bottom:10px;
            .card-content{
                padding:0px 16px;
            }
        }
    }
    ion-app.md [padding]
    {
         .scroll-content{
            padding:0px;
            margin-left:10px;
         }
    }

    .card-item { 
        .label{
            margin-right:0px;
        }
        .item-inner{
            padding-right:0px !important;
        }
        .card 
        {
            .card-content{
                padding:0px;
            }
        }
        .topic-name{
            h3{
            color:#012f60;
            font-weight:400;
            }
        }
        .topic-head{
            font-size:11px;
            color:#b3b3b3;
            font-weight:100;
            margin:0px;
        }
        .topic-value{
            font-size:11px;
            color:#b3b3b3;
            font-weight:500;
            margin:0px;
        }
        .border-right{
            border-right:1px solid #e0dede;
        }
        .arrow-next{
            width:6%;
        }
        .list-icon{
            img{
            width:78%;
            float:right;
            }
        }
        .card-divider{
            border-top:1px solid #e0dede;
            margin-top:9px; 
        }
    }

    .mar-left{
        padding-left:3px;
    }
    .label-md{
        margin-top:0px;
    }
    .segment-ios-primary .segment-button.segment-activated{
        background-color:#012f60;
        border:0px;
        border-bottom:4px solid #fff;
    }
    .segment-ios-primary .segment-button{
        border:0px;
        color:#fff;
    }
    .list-ios{
        margin:-1px 0 21px !important;
    }
    .list-ios > .item-block:last-child{
        border-bottom:0px;
    }
    .list-ios > .item-block:first-child{
        border-top:0px;
    }
    .list-header-ios {
        border-bottom:0px !important;
    }
    .label-ios{
        margin-top:0px;
        margin-right:0px;
    }
    .item-ios p{
        margin-top:10px;
    }
    .title-ios .toolbar-title-ios{
        margin-left:24px !important;
    }
    .video-grid{
        padding:0px;
        .col{
            padding:0px;
        }
    }
    @media all and (min-width: 500px) {
        .card-item
        {
            .list-icon{
                img{
                width:18% !important;
                }
            }
        }

    }
    .label-md{
        .detail-topic{
            padding-bottom:30px;
        }
    }
    .detail-topic
        {
    margin-top:-5px;
    white-space: pre-line;
       }
       .item-ios p{
           margin-top:0px;
       }
      .liveroom-detail>div>div>.label{
          margin-bottom:0px !important;
      }
      .label-ios{
        margin-bottom:0px !important;
      }
      .item-ios.item-block .item-inner{
        border-bottom:0px !important;
    }

}

TS：

   import { Component } from '@angular/core';
import { 
    Events,
    Loading, 
    LoadingController, 
    NavController, 
    NavParams, 
    AlertController, 
    ViewController 
} from 'ionic-angular';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { Storage } from '@ionic/storage';
//import { StreamingMedia, StreamingVideoOptions } from '@ionic-native/streaming-media';

export declare var RTCMultiConnection: any;
//declare function getHTMLMediaElement(mediaElement, config);

@Component({
  selector: 'page-liveroom',
  templateUrl: 'liveroom.html',
})
export class LiveroomPage {
  loading: Loading;
  roomDetail: any;
  connection = new RTCMultiConnection();
  roomId: string;
  BandwidthHandler: any = this.connection.BandwidthHandler;
  mediaElement: any;
  width: any;
  public room_name:string;
  public description:string;
  public details:string = 'description';
  public recomendation:any={};
  public class_name:string;
  public userId:string;
  public video_unavailable:boolean = false;
  private pageIndex;
  public tags:string;  
  public showmore:boolean = true;
  public showless:boolean = false;
  public notificationId:string;
  public alertPresented: boolean = false;
  public short_description:string;
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public loadingCtrl: LoadingController,
    public authService:AuthServiceProvider,
    public storage: Storage,
    public alertCtrl: AlertController,
    private viewCtrl: ViewController,
    public events:Events
  ) {
      let self = this;
      self.storage.get('userdata').then((userdata) => {
        self.userId = userdata.data.user.id;
        this.connection.userid = self.userId;
      });

      this.roomId = navParams.get("room_id");
      this.notificationId = navParams.get("notificationId");     
      this.connection.socketURL = 'https://webrtc.nexg.tv:9001/';
      this.connection.socketMessageEvent = 'video-broadcast-demo';
      this.connection.session = {
                      audio: true,
                      video: true,
                      oneway: true
                  };      
      this.createLoader(); 
      this.loading.present().then(() => {
      if(this.roomId){
        // this.loading.dismiss();  
        // this.connection.join(this.roomId);        
        let self = this;
        this.connection.checkPresence(this.roomId, function (isRoomExist) {    
          if (isRoomExist) {                
            self.loading.dismiss();                
            self.connection.bandwidth = {
              audio: 128,
              video: 256,
              screen: 300
            }
            self.connection.processSdp = function(sdp) {
              sdp = self.BandwidthHandler.setApplicationSpecificBandwidth(sdp, self.connection.bandwidth, !!self.connection.session.screen);
              sdp = self.BandwidthHandler.setVideoBitrates(sdp, {
                  min: 30,
                  max: 50
              });
              sdp = self.BandwidthHandler.setOpusAttributes(sdp);
              return sdp;
            };

            self.connection.connectionDescription = self.connection.join(self.roomId);
            return;
          } else {          
            this.video_unavailable = false;   
            self.loading.dismiss();            
            self.showError("This class is no longer available!");
          }  
        });       

        this.connection.onstream = function (event) { 
          var videoElement = event.mediaElement;
          videoElement.id = event.streamid;
          videoElement.controls = true;
          document.getElementById('videos-container').appendChild(videoElement); 

          //document.getElementById(event.streamid).setAttribute('playsinline', 'true');
        };
      } else {
        this.video_unavailable = false; 
        this.showError("This class is no longer available!");
        //hide loader
        this.loading.dismiss();
      }

      //when connection will close
      let self = this;
      this.connection.onstreamended = function (event) {

        let mediaElement = document.getElementById(event.streamid);
        if (mediaElement) {
            mediaElement.parentNode.removeChild(mediaElement);
        }
        if(self.video_unavailable == false){
          self.video_unavailable = true; 
          self.showError("This class has been closed by Teacher!");
        }
      };

      this.connection.onmute = function(event) {
        document.getElementById(event.streamid).removeAttribute('poster');
      }

      this.connection.onsessionclosed = function (event){
        self.showError("Session Closed!");
      }


      this.connection.ondisconnected = function (event){
        self.showError("Disconnected!");
      }
      this.connection.onleave = function(event) {  
        if (!self.connection.peers[self.connection.connectionDescription.remoteUserId]) {
          return;
        }
        self.connection.peers[self.connection.connectionDescription.remoteUserId].peer.close();
        // e.userid
        // e.extra
      };
    });
  }

  showError(text) {  
    if (this.alertPresented == false) {
      this.alertPresented = true;
      let alert = this.alertCtrl.create({
        title: 'Alert',
        subTitle: text,
        buttons: [
          {
            text: 'OK',
            role: 'cancel',
            handler: () => {
              this.navCtrl.remove(this.pageIndex);
            }
          }
        ]
      });
      alert.present();
    }    
  }

  createLoader(message: string = "Please wait...") {
    this.loading = this.loadingCtrl.create({
      content: message
    });
  }

  ionViewDidLoad() {
    //assign data
    this.pageIndex = this.viewCtrl.index;
    this.room_name = this.navParams.get("room_name");
    this.description = this.navParams.get('description'); 
    this.short_description = this.navParams.get('description');
    this.class_name = this.navParams.get('class_name');  
    this.tags = this.navParams.get('room_tag');  
  }

  ionViewDidLeave() {
    this.video_unavailable = true;
    if(!this.connection.peers[this.connection.connectionDescription.remoteUserId]) {
      return;
    }
    this.connection.peers[this.connection.connectionDescription.remoteUserId].peer.close(); 
  }

  getRecommondation(){
    this.recomendation = {};
  }

}

任何帮助表示赞赏。