uni-app 苹果手机video标签设置poster封面图点击播放时明显闪黑再播放 安卓手机测试无此现象

uni-app 苹果手机video标签设置poster封面图点击播放时明显闪黑再播放 安卓手机测试无此现象

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 20H2
HBuilderX类型 正式
HBuilderX版本号 3.2.9
手机系统 iOS
手机系统版本号 iOS 12.4
手机厂商 苹果
手机机型 iphone6
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
    <view>  
        <video :src="src" :poster="poster" object-fit="fill"></video>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                src: 'https://www.budaos.com/bds/uploads/474182cc-b0db-45dd-90e1-cda620ba9a5d.mp4',  
                poster: 'https://www.budaos.com/bds/uploads/474182cc-b0db-45dd-90e1-cda620ba9a5d.jpg'  
            }  
        },  
    }  
</script>  

<style>  

</style>

操作步骤：

新建uni-app工程，在index.vue中粘贴上述示例代码，目前是用的iphone6手机测试的，发现设置视频第一帧为poster封面图时，点击播放时会明显闪一下黑色再播放视频画面，做不到poster图片和视频无缝过渡，而安卓手机测试时不会出现该问题，过渡很平滑不会出现闪黑问题。

预期结果：

video标签设置视频第一帧为poster封面图时，点击播放后，苹果手机应该能和安卓手机一样都能保持平滑的过渡到视频画面，中间不会闪黑

实际结果：

苹果手机测试异常，播放视频时会闪一下黑色再播放。 安卓手机测试正常，能平滑的从poster封面图过渡到视频画面。

bug描述：

uni-app项目，苹果手机测试，video标签设置视频第一帧为poster封面图时，点击播放时会明显闪一下黑色再播放视频画面，做不到poster图片和视频无缝过渡，而安卓手机测试时不会出现该问题，过渡很平滑不会出现闪黑问题。


更多关于uni-app 苹果手机video标签设置poster封面图点击播放时明显闪黑再播放 安卓手机测试无此现象的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

问题复现，这边排查下，已加分，感谢您的反馈！

更多关于uni-app 苹果手机video标签设置poster封面图点击播放时明显闪黑再播放 安卓手机测试无此现象的实战教程也可以访问 https://www.itying.com/category-93-b0.html


android nvue页面，第一次加载video正常播放，然后动态修改video播放地址，video就黑屏了。

只能把video关掉，再用新地址开启video 才能播放

HX 3.2.10+ 版本已修复此问题

请问已经实装好了吗，为啥我升级3.2.10后本地开发测试，和云打包后测试效果还是和以前一样，播放时还是会闪一下黑屏，iphone6，ios12.5真机测试的

回复 首席烟花引燃师: 你这个视频本身链接服务器就很慢啊 你换一个测试视频试一下 视频的加载链接 肯定是需要时间的 赶上服务器慢 系统函数告诉我 缓冲完了 代码移除了封面 但是视频又在缓冲 就会产生这种情况

回复 首席烟花引燃师: 我们修复的 只能是让这个移除封面的时间更准备 但具体体验 要看你的视频播放源是怎样的

回复 天生DR: 或者能不能提供一个缓存进度的事件呢，我们监听到缓存出了多少秒然后才调用播放。目前上了CDN且确保不是回源返回的，但黑屏还是很明显，且绝大部分都是的，手机网络是正常的。

回复 h***@hongfs.cn: video模块 我们也是用了第三方开源的ijkplayer 一些高层封装的状态 他对外也没有那么细 另外音视频这块知识过于庞大 video 我们提供了 高级的设置一些 参数 具体你可以看下这个 例如改小缓冲空间 你看看这一偏 https://ask.dcloud.net.cn/article/39136

这是一个iOS系统底层渲染机制导致的已知问题，与uni-app框架本身关系不大。iOS的<video>组件在播放启动时，会先销毁poster图层，再创建视频渲染层，这个切换过程会出现短暂黑屏。安卓系统的视频组件实现不同，通常能实现平滑过渡。

临时解决方案：

  1. 使用自定义封面和控制层：隐藏原生video的poster，使用<image>覆盖在video上层作为封面，通过自定义播放按钮控制。点击播放时，先隐藏封面图，再触发video播放。
<template>
    <view class="video-container">
        <video ref="videoRef" :src="src" @play="onPlay"></video>
        <image v-if="showPoster" :src="poster" class="poster" @click="playVideo"></image>
        <view v-if="showPoster" class="play-btn" @click="playVideo">▶</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            src: 'your-video-url',
            poster: 'your-poster-url',
            showPoster: true
        }
    },
    methods: {
        playVideo() {
            this.$refs.videoRef.play()
        },
        onPlay() {
            this.showPoster = false
        }
    }
}
</script>

<style>
.video-container {
    position: relative;
    width: 100%;
}
video {
    width: 100%;
    height: 400rpx;
}
.poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80rpx;
    height: 80rpx;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
}
</style>
回到顶部