我们正在使用离子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 = {};
}
}
任何帮助表示赞赏。