live-palyer ios 全屏错位
发布于 6 年前 作者 litan 15005 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

非全屏

全屏

  • 预期表现
  • 复现路径
  • 提供一个最简复现 Demo

index.wxml页面

<view class=‘container-box’>

<view class=‘camera-view’>

<live-player

style=“width: 100%;height: 100%;”

id=“camera-player”

src=“rtmp://192.168.2.50:1937/camera/2”

mode=“RTC”

orientation=“vertical”

object-fit=“contain”

background-mute=“false”

autoplay=‘true’

bindstatechange=“onCameraPlayEvent”

bindfullscreenchange=“cameraFullscreenChange”>

<cover-image class=“button_bottom” src="…/…/images/full.png" bindtap=‘cameraFullscreenClick’></cover-image>

</live-player>

</view>

<view style=‘height:0.5%;’></view>

<view class=‘camera-view’>

<live-player

style=“width: 100%;height: 100%;”

id=“camera-player1”

src=""

mode=“RTC”

orientation=“vertical”

object-fit=“contain”

background-mute=“false”

autoplay=‘false’

indstatechange=“onCamera1PlayEvent”

bindfullscreenchange=“camera1FullscreenChange”>

<cover-image class=“button_bottom” src="…/…/images/full.png" bindtap=‘camera1FullscreenClick’></cover-image>

</live-player>

</view>

</view>

index.js

Page({

/**

  * 页面的初始数据

  */

data: {

firstshow: true,

cameraData: {

cameraPlayUrl: ‘’,

cameraPlayCxt: {},

isFullscreen: false,

},

camera1Data: {

cameraPlayUrl: ‘’,

cameraPlayCxt: {},

isFullscreen: false,

},

mute: false,

},

onCameraPlayEvent: function (ret) {

this.playEvent(ret.detail.code);

},

onCamera1PlayEvent: function (ret) {

this.playEvent(ret.detail.code);

},

playEvent(code) {

},

cameraFullscreenChange: function () {

this.setData({

[‘cameraData.isFullscreen’]: !this.data.cameraData.isFullscreen

});

},

camera1FullscreenChange: function () {

this.setData({

[‘cameraData1.isFullscreen’]: !this.data.cameraData1.isFullscreen

});

},

cameraFullscreenClick: function () {

console.log(1);

if (this.data.cameraData.isFullscreen) {

this.data.cameraData.cameraPlayCxt.exitFullScreen();

} else {

this.data.cameraData.cameraPlayCxt.requestFullScreen({ direction: 90 });

}

},

camera1FullscreenClick: function () {

console.log(1);

if (this.data.cameraData1.isFullscreen) {

this.data.cameraData1.cameraPlayCxt.exitFullScreen();

} else {

this.data.cameraData1.cameraPlayCxt.requestFullScreen({ direction: 90 });

}

},

createPlayCxt: function () {

this.setData({

[‘cameraData.cameraPlayCxt’]: wx.createLivePlayerContext(‘camera-player’),

[‘cameraData1.cameraPlayCxt’]: wx.createLivePlayerContext(‘camera-player1’),

})

},

/**

 * 生命周期函数–监听页面加载

 */

onLoad: function (options) {

},

/**

  * 生命周期函数–监听页面初次渲染完成

  */

onReady: function () {

var self = this;

this.createPlayCxt();

this.data.firstshow = false;

},

/**

    * 生命周期函数–监听页面显示

    */

onShow: function () {

var self = this;

// 保持屏幕常亮

wx.setKeepScreenOn({

keepScreenOn: true

})

},

/**

  * 生命周期函数–监听页面隐藏

  */

onHide: function () {

console.log(“onhide”);

},

/**

  * 生命周期函数–监听页面卸载

  */

onUnload: function () {

},

})

index.css

page{

background-color:#f3f3f3;

}

.container-box{

height: 100vh;

width: 100%;

}

.camera-view{

/* height: 54.5%;   */

height: 30.5%;

}

.camera-blank{

height: 0.5%;

}

.button_bottom

{

position: absolute;

top:0px;

left: 0px;

z-index: 11111;

width: 48px;

height: 48px;

display:inline-block;

}

3 回复

同问,解决了吗,全屏后真的是各种问题,IOS全屏前cover-view可以覆盖在live-player上,全屏后就不能覆盖了。

这里是两个live-player;其中一个src可以播,另一个src暂时给空,将可以播的live-player全屏 出现上面现象

回到顶部