<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">≪</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>
- 发布:2022-08-23 09:24
- 更新:2022-09-14 14:19
- 阅读:532
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 专业版19044.1889
HBuilderX类型: 正式
HBuilderX版本号: 3.5.3
手机系统: iOS
手机系统版本号: iOS 14
手机厂商: 苹果
手机机型: iphone8
页面类型: vue
vue版本: vue2
打包方式: 离线
项目创建方式: HBuilderX
示例代码:
操作步骤:
点击全屏,然后退出全屏,试多几次
点击全屏,然后退出全屏,试多几次
预期结果:
切换顺滑
切换顺滑
实际结果:
卡死,退出应用
卡死,退出应用
bug描述:
video切换全屏,几次就出现卡死bug,部分手机出现,一点击全屏就卡死问题
全屏播放的时候,退出全屏,会出现如附件所示的页面
重点:打包发布的未测试
z***@t-chip.com.cn (作者) - 无
这里统一回复下吧,云打包后并不会出现该问题,安卓真机运行不会出现该问题,小程序上运行也不会该问题。
另外,我的手机ios14,自定义基座运行会显示不了应用,真机运行也一样,均重启后才显示出来app。
撒花.............