uni-app video 在苹果nvue页面设置poster封面图点击播放时会明显闪一下黑色再播放

uni-app video 在苹果nvue页面设置poster封面图点击播放时会明显闪一下黑色再播放

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 23H2
HBuilderX 正式
HBuilderX版本 4.84
手机系统 iOS
手机版本号 iOS 26
手机厂商 苹果
手机机型 iPhone 13
页面类型 nvue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>
<view>
<video :src="src" :poster="poster" autoplay></video>
</view>
</template>
<script setup>
import { ref } from 'vue'; 
const src = ref('https://alimp4.shiboshuzi.com/f0234921a10371ef88906732b68e0102/3f365b3da1c2498ea90179bf7477ee50-c6d4ac45138baa09cba31ccf262ac42f-ld.mp4')  
const poster = ref('https://alimp4.shiboshuzi.com/a0ece1b1095c71f0bfba5017f0e80102/snapshots/dbe529e3979a45f99d28683e38eb6838-00001.jpg')
</script>
<style scoped lang="scss"></style>

操作步骤：

新建uniapp vue3项目，视频播放页面使用nvue，我用的list组件来写的视频上下滑动，你可以用swiper来复现

预期结果：

在ios端设置视频封面poster的时候播放视频时要无缝播放该视频而不是闪一下黑色的再播放，安卓就比较顺畅，主要的问题视频我都已经缓存到本地，也是使用本地地址来播放的视频

实际结果：

在ios端设置视频封面poster的时候播放视频会闪一下黑色再播放视频


更多关于uni-app video 在苹果nvue页面设置poster封面图点击播放时会明显闪一下黑色再播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video 在苹果nvue页面设置poster封面图点击播放时会明显闪一下黑色再播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个iOS nvue页面中video组件的已知问题，主要原因是iOS原生视频播放器在poster和视频内容切换时的渲染机制导致的。

问题分析：

  1. iOS系统在视频开始播放时，会先移除poster封面图，然后初始化视频解码器
  2. 这个切换过程会短暂显示黑色背景，直到第一帧视频画面渲染完成
  3. 在Android上这个过渡相对平滑，但iOS上较为明显

解决方案：

  1. 使用自定义封面层替代poster属性
<template>
<view class="video-container">
  <video :src="src" @play="onVideoPlay" autoplay></video>
  <image v-if="showPoster" :src="poster" class="poster-image" />
</view>
</template>

<script setup>
import { ref } from 'vue';

const src = ref('your_video_url')
const poster = ref('your_poster_url')
const showPoster = ref(true)

const onVideoPlay = () => {
  showPoster.value = false
}
</script>

<style scoped>
.video-container {
  position: relative;
  width: 750rpx;
  height: 422rpx;
}
.poster-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
  1. 预加载视频首帧 通过设置视频的preload="auto"属性，让视频提前加载，减少黑屏时间：
<video :src="src" preload="auto" autoplay></video>
回到顶部