uni-app IOS15 使用video组件的sendDanmu功能弹幕不兼容，弹幕滚动方向从左往右异常

在 uni-app 中使用 video 组件的 sendDanmu 功能时，如果遇到弹幕滚动方向从左往右异常的问题，尤其是在 iOS 15 上，可能是由于以下原因导致的：

1. iOS 15 的兼容性问题

iOS 15 在某些情况下对 video 组件的弹幕功能支持可能存在问题，尤其是在弹幕的滚动方向上。这可能是由于 iOS 15 的 WebView 或浏览器内核的更新导致的。

2. 弹幕样式问题

弹幕的滚动方向通常由 CSS 样式控制。如果弹幕的样式设置不正确，可能会导致弹幕从左往右滚动异常。

3. uni-app 的 video 组件实现问题

uni-app 的 video 组件在不同平台上的实现可能有所不同，尤其是在 iOS 上，可能会存在一些兼容性问题。

解决方案

1. 检查弹幕样式

确保弹幕的样式设置正确，尤其是 transform 和 animation 相关的属性。你可以尝试手动设置弹幕的滚动方向。

.danmu {
    position: absolute;
    white-space: nowrap;
    animation: danmu 10s linear;
}

[@keyframes](/user/keyframes) danmu {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

如果弹幕是从左往右滚动，可以调整 transform 的值：

[@keyframes](/user/keyframes) danmu {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

2. 使用自定义弹幕组件

如果 video 组件的 sendDanmu 功能在 iOS 15 上无法正常工作，可以考虑使用自定义的弹幕组件来实现弹幕功能。你可以通过 canvas 或 div 元素来实现弹幕的滚动效果。

3. 更新 uni-app 版本

确保你使用的是最新版本的 uni-app，因为新版本可能会修复一些已知的兼容性问题。

4. 使用原生插件

如果问题依然存在，可以考虑使用原生插件来实现弹幕功能。uni-app 支持通过原生插件来扩展功能，你可以编写一个原生插件来处理弹幕的显示和滚动。

5. 反馈给 uni-app 团队

如果问题确实是由于 uni-app 的 video 组件在 iOS 15 上的兼容性问题导致的，建议将问题反馈给 uni-app 团队，以便他们能够及时修复。

示例代码

以下是一个简单的自定义弹幕组件的示例：

<template>
    <view class="video-container">
        <video :src="videoSrc" controls></video>
        <view class="danmu-container">
            <view v-for="(danmu, index) in danmuList" :key="index" class="danmu">{{ danmu }}</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            videoSrc: 'your-video-url',
            danmuList: []
        };
    },
    methods: {
        sendDanmu(text) {
            this.danmuList.push(text);
        }
    }
};
</script>

<style>
.video-container {
    position: relative;
    width: 100%;
    height: 300px;
}

.danmu-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.danmu {
    position: absolute;
    white-space: nowrap;
    animation: danmu 10s linear;
}

[@keyframes](/user/keyframes) danmu {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
</style>