<template>
<view>
<video
class="video"
src="http://security.ssports.com/api/channel/v6/watchIqyVideo/20210125/a4/f8/bacea8cfae4b53c21bf7ed2dba345729.m3u8?VIDEOID=52191771&UID=0&QUALITY=360&UUID=161961ed0ca414bd54940d4e9984ec0c&DEVICE=h5"
controls
>
</video>
<view class="text-box">
<view class="one">我是一棵，小小的石头</view>
<view class="two">想要飞啊飞，却怎么飞也飞不高。。。</view>
</view>
<view class="strut-box"><view class="item" v-for="(item, index) of 4" :key="index"></view></view>
<view class="foot">我是foot</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {},
}
</script>
<style>
.video {
width: 100%;
position: relative;
}
.text-box {
padding: 30rpx;
font-size: 28rpx;
}
.text-box .two {
margin-top: 20rpx;
}
.strut-box {
height: 800rpx;
background-color: pink;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.strut-box .item {
width: 48%;
height: 200rpx;
background-color: skyblue;
}
.foot {
height: 100rpx;
line-height: 100rpx;
text-align: center;
background-color: #4cd964;
color: #ffffff;
}
</style>
betterdev
- 发布：2021-01-26 21:08
- 更新：2021-01-26 21:28
- 阅读：718
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows10专业版
HBuilderX类型： 正式
HBuilderX版本号： 3.0.7
手机系统： Android
手机系统版本号： Android 8.1
手机厂商： 华为
手机机型： Honor 8C
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
进入看视频页面，播放视频，然后进行横竖屏切换，会出现黑屏的情况。。。
进入看视频页面，播放视频，然后进行横竖屏切换，会出现黑屏的情况。。。
预期结果：
预期结果就是像上个版本那样横竖屏流畅切换啊
预期结果就是像上个版本那样横竖屏流畅切换啊
实际结果：
横竖屏切换，会出现黑屏的情况。。。
横竖屏切换，会出现黑屏的情况。。。
bug描述：
我在HBuilderX升级到3.0.7.20210123（就是目前最新版）后，video播放.m3u8文件在进行横竖屏切换成会出现黑屏，短的时候1~2s左右，慢的话有时候能黑屏4~5s左右，黑屏时会出现如图所示的小绿方快，有时甚至会整个屏幕绿屏一下，但整屏绿屏的情况很少见，主要是黑屏有时候太久了。上个版本不会出现此种情况 且上个版本横竖屏切换基本是无缝切换很流畅，新版本就有黑屏的问题了。但上个版本会出现视频人物运动时掉帧，出现噪点的情况，新版本优化了但就是黑屏很难受。。。
betterdev (作者)
我刚创建了一个hello uni-app示例项目看了一下，直接播放video进行横竖品切换并未出现我上面所说的情况。。。
2021-01-26 21:30
betterdev (作者)
但这是为什么呢，为什么我自己的项目就有这个问题呢，是在HBuilder升级到最新版后才有的，目前我只在我的测试机上测过，安卓8.1，其他手机暂未测过。。。
2021-01-26 21:36
betterdev (作者)
我刚刚又用hello uni-app测了一下，填入了网络.m3u8文件地址，发现hello uni-app中的video组件明显就是上一个版本的啊，人物运动时丢帧，出现噪点，不是最新版的。。。我发现这个黑屏问题貌似还跟视频质量有关，质量好一点的，横竖屏切换时就黑屏一下，质量差的黑的会久一些
2021-01-27 13:08
betterdev (作者)
其实也不是单纯的黑屏，就是横竖屏切换时会卡得黑屏，屏幕上会出现小绿或小灰方块
2021-01-27 13:10