uni-app Video的title在iOS端无法更新

uni-app Video的title在iOS端无法更新

示例代码：

<video class="video" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" :title="title" autoplay controls></video>

<button @click="updateTitle" class="page-body-button">更新标题</button>  

updateTitle: function () {  
    this.count ++;  
    this.title = '更新标题'+this.count ;  
}

操作步骤：

在官网Hello uniapp模版中添加上面更新title的方法即可复现。

预期结果：

全屏后显示更新后的title。

实际结果：

一直现在第一次设置的title

bug描述：

title更新后在iOS端一直显示老的title


| 信息类别     | 信息内容       |
|--------------|----------------|
| 产品分类     | uniapp/App     |
| PC开发环境   | Mac            |
| PC操作系统版本 | 15.5 (24F74)   |
| HBuilderX类型 | 正式           |
| HBuilderX版本 | 4.76           |
| 手机系统     | iOS            |
| 手机系统版本 | iOS 26         |
| 手机厂商     | 苹果           |
| 手机机型     | iPhone 11      |
| 页面类型     | vue            |
| vue版本      | vue3           |
| 打包方式     | 云端           |
| 项目创建方式 | HBuilderX      |

更多关于uni-app Video的title在iOS端无法更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app Video的title在iOS端无法更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的iOS平台限制问题。在iOS系统中，video组件的title属性在初始化后无法动态更新，这是WebKit内核的底层限制。

原因分析： iOS Safari对video元素的title属性处理存在缓存机制，首次渲染后即使DOM属性更新，全屏时显示的标题也不会同步刷新。

解决方案：

  1. 重新创建video实例 - 通过v-if控制video组件的销毁和重建
<video v-if="showVideo" :title="title"></video>

updateTitle: function () {
    this.count++;
    this.title = '更新标题'+this.count;
    this.showVideo = false;
    this.$nextTick(() => {
        this.showVideo = true;
    });
}
回到顶部