阿里云播放器全屏水印解决方案

解决移动端全屏模式下动态水印不显示的问题,确保水印始终覆盖在视频上方

问题分析:在移动端全屏模式下,阿里云播放器的弹幕组件可能无法正确覆盖在视频上方,导致水印不可见。

解决方案:通过监听全屏状态变化,动态调整水印的层级和位置,确保其始终显示。

实现代码示例:

// 初始化播放器
var player = new Aliplayer({
    id: "player",
    source: "你的视频源地址",
    width: "100%",
    height: "100%",
    autoplay: false,
    isLive: false,
    controlBarVisibility: "always",
    components: [{
        name: 'BulletScreenComponent',
        type: AliPlayerComponent.BulletScreenComponent,
        args: [
            localStorage.getItem('_rememberedUsername') || '默认水印文本', 
            { 
                fontSize: '.3rem', 
                color: 'rgba(255, 255, 255, 0.8)', 
                animation: 'bullet 20s linear infinite'
            }, 
            'random'
        ]
    }]
});

// 监听全屏状态变化
player.on('requestFullScreen', function() {
    // 全屏时调整水印样式
    setTimeout(function() {
        var watermarks = document.querySelectorAll('.prism-bullet-screen');
        watermarks.forEach(function(watermark) {
            watermark.style.zIndex = '9999';
            watermark.style.position = 'absolute';
        });
    }, 300);
});

player.on('cancelFullScreen', function() {
    // 退出全屏时恢复水印样式
    var watermarks = document.querySelectorAll('.prism-bullet-screen');
    watermarks.forEach(function(watermark) {
        watermark.style.zIndex = '';
        watermark.style.position = '';
    });
});