uni-app nvue 页面video组件前几秒画面慢并且没有声音

uni-app nvue 页面video组件前几秒画面慢并且没有声音

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.2.16

手机系统：Android

手机系统版本号：Android 12

手机厂商：华为

手机机型：红米k40

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：
``` <video id="myVideo" 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" autoplay ></video>

操作步骤：
nvue 页面video组件前几秒画面慢并且没有声音，两三秒后就正常了

预期结果：
nvue 页面video组件前几秒画面慢并且没有声音，两三秒后就正常了

实际结果：
nvue 页面video组件前几秒画面慢并且没有声音，两三秒后就正常了

bug描述：
nvue 页面video组件前几秒画面慢并且没有声音，两三秒后就正常了

更多关于uni-app nvue 页面video组件前几秒画面慢并且没有声音的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

附上相应代码

更多关于uni-app nvue 页面video组件前几秒画面慢并且没有声音的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我手机红米Note 9Pro，andorid11，没有这个问题

设置成软解码 有没有这个问题

play-strategy=“1” 是这个的问题

好吧我在说废话

这个问题是 nvue 页面中 video 组件在 Android 平台上的典型性能问题，主要源于视频播放器的初始化缓冲和渲染管线建立需要时间。

核心原因分析：

  1. 播放器初始化延迟：nvue 页面使用原生渲染，video 组件对应的是原生播放器控件。首次加载视频时，系统需要初始化 MediaPlayer、解码器，并建立音视频同步管线，这个过程需要几百毫秒到几秒的时间。
  2. 网络缓冲不足：虽然你使用的是网络视频，但即使本地视频也会出现此现象，因为播放器需要先缓冲足够的数据帧才能开始流畅播放。
  3. 首帧渲染开销：视频解码后的第一帧画面需要经过 GPU 渲染管线，在 nvue 的原生渲染环境中，这个初始渲染过程可能比后续帧更耗时。

针对性解决方案：

  1. 预加载机制：

    // 在页面 onLoad 或合适时机预创建 video 上下文
onLoad() {
    this.videoContext = uni.createVideoContext('myVideo', this)
    // 可提前设置源但不自动播放
}

  2. 使用 poster 占位图：

    <video 
    id="myVideo" 
    src="your-video-url" 
    poster="/static/poster.jpg"
    @loadedmetadata="onVideoReady"
></video>

    methods: {
    onVideoReady() {
        // 元数据加载完成后可开始播放
        this.videoContext.play()
    }
}

  3. 调整播放策略：

    • 延迟 500ms-1000ms 再开始播放
    • 先静音播放，待画面流畅后再开启声音
    setTimeout(() => {
    this.videoContext.play()
    setTimeout(() => {
        this.videoContext.muted = false
    }, 2000)
}, 500)
回到顶部