uni-app ios微信浏览器swiper放video视频时视频数据增加显示黑屏

uni-app ios微信浏览器swiper放video视频时视频数据增加显示黑屏

产品分类

  • uniapp/H5

PC开发环境

  • 操作系统：Windows
  • 操作系统版本号：Windows 10
  • 开发工具：HBuilderX
  • 开发工具版本号：3.2.14

项目信息

  • 浏览器平台：微信内置浏览器
  • 浏览器版本：8.0.9
  • 项目创建方式：HBuilderX

App下载地址或H5网址

示例代码

if (res.success) {
    var datalist = res.data
    // console.log(datalist)
    for (let i = 0; i < datalist.length; i++) {
        datalist[i].id = datalist[i].id + ''
        // this.videoList.push(datalist[i])
        console.log(e.detail.current + i + 1, datalist[i])
        this.$set(this.videoList, e.detail.current + i + 1, datalist[i])
    }
}

操作步骤

第一次打开h5请求到五条视频，ios可以正常播放，当滑动到最后一条视频，动态添加五条视频到原来的视频列表中，第六条视频显示黑屏,必须要点击才能播放，实现不了自动播放，安卓机型都可以

预期结果

ios系统微信内置浏览器，在动态添加视频的时候，可以自动播放

实际结果

ios系统微信内置浏览器，在动态添加视频的时候，视频黑屏，必须点击才能自动播放

bug描述

ios微信浏览器swiper放video视频，视频数据增加显示黑屏


更多关于uni-app ios微信浏览器swiper放video视频时视频数据增加显示黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

ios需要交互才可以触发,移动端的Safari 限制在直接用户交互时才可触发播放,click，touchstart，touchend，touchmove 等由用户触发的事件都是，键盘事件也是

更多关于uni-app ios微信浏览器swiper放video视频时视频数据增加显示黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个是已经OK了的，但是滑动到最后一条数据，再次添加列表的时候，ios播放就不行了，就算添加了touchmove事件还不行，必须要Click才可以

在iOS微信浏览器中，video元素的自动播放受到严格限制，通常需要用户主动交互（如点击）才能触发播放。结合swiper动态加载视频时，新增的video元素没有用户交互历史，因此会显示为黑屏且无法自动播放。

针对你的代码，可以尝试以下方案：

  1. 使用play()方法并捕获异常： 在动态添加视频后，尝试调用play()方法，并用try-catch处理iOS的限制：

    this.$nextTick(() => {
    const videoElement = this.$refs.videoRef[e.detail.current + i + 1];
    if (videoElement) {
        const playPromise = videoElement.play();
        if (playPromise !== undefined) {
            playPromise.catch(() => {
                // 自动播放被阻止，需要用户交互
            });
        }
    }
});

  2. 设置muted属性： iOS允许静音视频自动播放，可尝试先设置muted，播放后再取消静音（需用户交互）：

    <video :muted="true" [@play](/user/play)="handlePlay"></video>

  3. 预加载视频元数据： 在动态添加视频时，提前加载视频元数据，减少黑屏时间：

    const video = new Video();
video.src = datalist[i].url;
video.load();
回到顶部