z***@t-chip.com.cn
z***@t-chip.com.cn
  • 发布:2022-08-23 09:24
  • 更新:2022-09-14 14:19
  • 阅读:420

【报Bug】基座运行video组件,切换全屏卡死

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版19044.1889

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

手机系统: iOS

手机系统版本号: iOS 14

手机厂商: 苹果

手机机型: iphone8

页面类型: vue

vue版本: vue2

打包方式: 离线

项目创建方式: HBuilderX

示例代码:
<template>  
  <view>  
    <view class="video-container">  
      <view>  
        <video id="myVideo" :src="src" controls class="video-dom" :direction="-90" :play-strategy="2"  
          :vslide-gesture-in-fullscreen="false" :style="{  
            width: size.width,  
            height: size.height  
          }" @error="videoErrorCallback" @fullscreenchange="handleFullScreen">  
          <!-- #ifdef APP-PLUS -->  
          <cover-view style="position:relative">  
            <view class="top-bar">  
              <text class="back-btn" @click="exitFullScreen">&#8810;</text>  
              <text v-if="!showDanmu" class="danmu-btn-hide" @click="showDanmu = !showDanmu">弹幕</text>  
              <text v-if="showDanmu" class="danmu-btn-show" @click="showDanmu = !showDanmu">弹幕</text>  
            </view>  
            <!-- <danmu ref="danmuRef"></danmu> -->  
          </cover-view>  
          <!-- #endif -->  

          <!--wx小程序另外布局,使用view-->  
          <!-- #ifdef MP-WEIXIN -->  
          <view class="danmu-bar">  
            <view v-if="!showDanmu" class="danmu-btn-hide" @click="showDanmu = !showDanmu">弹幕</view>  
            <view v-if="showDanmu" class="danmu-btn-show" @click="showDanmu = !showDanmu">弹幕</view>  
          </view>  
          <!-- #endif -->  
        </video>  
      </view>  

      <!-- #ifndef MP-ALIPAY -->  
      <view>  
        <view class="uni-list-cell">  
          <view>  
            <view class="uni-label">弹幕内容</view>  
          </view>  
          <view class="uni-list-cell-db">  
            <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />  
          </view>  
        </view>  
      </view>  
      <view class="uni-btn-v">  
        <button @click="sendDanmu" class="page-body-button">发送弹幕</button>  
      </view>  
      <!-- #endif -->  
    </view>  
  </view>  
</template>  
<script>  
import danmu from './danmu.vue'  
export default {  
  components: {  
    danmu  
  },  
  props: {  
    size: {//区域高宽  
      type: Object,  
      default: () => {  
        return {  
          width: '750rpx',  
          height: '250px'  
        }  
      }  
    },  
    showFullscreenBtn: {//是否显示全屏按钮    
      type: Boolean,  
      default: true  
    }  
  },  
  data() {  
    return {  
      platform: '',//平台  
      videoContext: null,//视频实例  
      isFullScreen: false,  
      showDanmu: false,  
      title: '拒绝模式单一!多系统功能小主机分享',  
      src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  

      danmuList: [  
        { text: '我就算从这跳下去', color: '#fff', time: 1, avatar: '../../static/avatar.png' },  
        { text: '密集恐惧症患者', color: '#fff', time: 2, avatar: '../../static/avatar.png' },  
        { text: '也不会吃你一口小龙虾', color: '#fff', time: 103, avatar: '../../static/avatar.png' },  
        { text: '也不会吃你一口小龙虾', color: '#fff', time: 104, avatar: '../../static/avatar.png' },  
        { text: '也不会吃你一口小龙虾', color: '#fff', time: 105, avatar: '../../static/avatar.png' },  
        { text: '也不会吃你一口小龙虾', color: '#fff', time: 106, avatar: '../../static/avatar.png' },  
        { text: '也不会吃你一口小龙虾', color: '#fff', time: 107, avatar: '../../static/avatar.png' },  
        { text: '真香!!!', color: '#fff', time: 111, avatar: '../../static/avatar.png' },  
        { text: '真香!!!!!', color: '#fff', time: 114 },  
        { text: '真香!!!', color: '#fff', time: 118 },  
        { text: '前方高能!!!', color: '#fff', time: 123, avatar: '../../static/avatar.png' },  
      ],  
      danmuValue: ''  
    }  
  },  
  created: function (res) {  
    // #ifndef MP-ALIPAY  
    this.videoContext = uni.createVideoContext('myVideo')  
    // #endif  

    uni.getSystemInfo({  
      success: (e) => {  
        // #ifndef MP  
        this.platform = e.platform  
        // #endif  
      }  
    })  
  },  
  methods: {  
    handleFullScreen(e) {  
      if (e.detail.fullScreen) {  
        this.isFullScreen = true;  
      }  
      else {  
        this.isFullScreen = false;  
      }  
    },  
    //点击退出全屏  
    exitFullScreen() {  
      this.videoContext.exitFullScreen();  
      this.isFullScreen = false;  
    },  
    sendDanmu: function () {  
      this.$refs.danmuRef.add({ item: '也不会吃你一口小龙虾也不会吃你一口小龙虾也不会吃你一口小龙虾' });  
      this.danmuValue = '';  
    },  
    videoErrorCallback: function (e) {  
      uni.showModal({  
        content: e.target.errMsg,  
        showCancel: false  
      })  
    },  
    getRandomColor: function () {  
      const rgb = []  
      for (let i = 0; i < 3; ++i) {  
        let color = Math.floor(Math.random() * 256).toString(16)  
        color = color.length == 1 ? '0' + color : color  
        rgb.push(color)  
      }  
      return '#' + rgb.join('')  
    }  
  }  
}  
</script>  

<style lang="scss" scoped>  
.video-dom {  
  position: relative;  
}  

.top-bar {  
  /* #ifndef APP-PLUS-NVUE */  
  display: flex;  
  /* #endif*/  
  flex-direction: row;  
  justify-content: space-between;  
  align-items: center;  
  padding: 0 5px;  
  height: 30px;  
  background-color: rgba(0, 0, 0, 0.2);  
}  

.back-btn {  
  color: #fff;  
  font-size: 30px;  
  line-height: 30px;  
}  

.danmu-btn-hide {  
  padding: 0px 10px;  
  border: 1px solid #fff;  
  border-radius: 5px;  
  color: #fff;  
}  

.danmu-btn-show {  
  padding: 0px 10px;  
  border: 1px solid #a61473;  
  border-radius: 5px;  
  color: #a61473;  
}  

.danmu-bar {  
  position: absolute;  
  top: 45%;  
  right: 20px;  
}  
</style>  

操作步骤:

点击全屏,然后退出全屏,试多几次

预期结果:

切换顺滑

实际结果:

卡死,退出应用

bug描述:

video切换全屏,几次就出现卡死bug,部分手机出现,一点击全屏就卡死问题
全屏播放的时候,退出全屏,会出现如附件所示的页面

重点:打包发布的未测试

2022-08-23 09:24 负责人:无 分享
已邀请:
即时通讯开发

即时通讯开发

我也遇到了同样的问题

z***@t-chip.com.cn

z***@t-chip.com.cn (作者) -

这里统一回复下吧,云打包后并不会出现该问题,安卓真机运行不会出现该问题,小程序上运行也不会该问题。
另外,我的手机ios14,自定义基座运行会显示不了应用,真机运行也一样,均重启后才显示出来app。
撒花.............

s***@163.com

s***@163.com

我也是刚最近用到video时候发现的,官方做的这个贼垃圾,这个全屏和退出全屏的问题几年前就有了,到现在还没修复。真是醉了。

s***@163.com

s***@163.com

从一几年开始,到现在,都能搜到视频的全屏卡死问题。这东西到底还能不能用?

w***@126.com

w***@126.com - 90后

切换上一版本打包就不卡死了,这个问题官方记录了,已知不处理

要回复问题请先登录注册