收藏
回答

live-palyer ios 全屏错位

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug live-player 客户端 6.7.2 2.2.3

- 当前 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;

}


最后一次编辑于  2018-08-24
回答关注问题邀请回答
收藏

3 个回答

  • 晨
    2018-08-24

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2018-08-24
    有用
    回复 4
    • 黎伟
      黎伟
      2018-08-24

      wechatide://minicode/TpbmsUmY7m1C

      2018-08-24
      回复
    • 黎伟
      黎伟
      2018-08-24

      是wechatide://minicode/TpbmsUmY7m1C这个吗?

      2018-08-24
      回复
    • 黎伟
      黎伟
      2018-08-24

      你好 请问下你们复现这个问题了吗

      2018-08-24
      回复
    • 晨
      2018-08-27回复黎伟

      你好,问题已复现,我们后续版本来修复

      2018-08-27
      回复
  • 张三李四
    张三李四
    2019-02-13

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

    2019-02-13
    有用
    回复
  • 黎伟
    黎伟
    2018-08-24

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

    2018-08-24
    有用
    回复 1
    • 2018-09-26

      问题解决了嘛??我也遇到了,全屏各种bug,页面样式乱跑

      2018-09-26
      1
      回复
登录 后发表内容