解决移动端全屏模式下动态水印不显示的问题,确保水印始终覆盖在视频上方
问题分析:在移动端全屏模式下,阿里云播放器的弹幕组件可能无法正确覆盖在视频上方,导致水印不可见。
解决方案:通过监听全屏状态变化,动态调整水印的层级和位置,确保其始终显示。
// 初始化播放器
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 = '';
});
});