Google Tag Manager导致Vimeo播放暂停时addClass/removeClass功能异常

• GTM加载过程中会动态插入iframe、执行额外脚本，大概率会重复初始化Vimeo播放器实例，导致你之前绑定的play/pause事件监听器直接失效。
• Vimeo player.js依赖postMessage和视频iframe跨域通信，GTM默认会注册全局的message事件监听器做数据收集，两者的事件处理逻辑产生冲突时，会导致player的事件回调无法正常触发。
• 你提供的CSS代码存在语法错误：.playing .text-playing.末尾多了一个多余的句号，会导致这行样式不生效，即使JS逻辑正常也看不到状态切换效果。

1. 避免播放器实例被覆盖、事件重复绑定 #

初始化播放器时将实例挂载到全局window对象上，绑定事件前先清除之前的同名事件，防止多次绑定逻辑冲突：

// 初始化时挂载到全局
window.vimeoPlayer = new Vimeo.Player('video', {
  // 你的播放器配置参数
});

// 绑定事件前先off清除旧监听
window.vimeoPlayer.off('play').on('play', function () {
  $('.wrapper').addClass('playing').removeClass('paused');
});

window.vimeoPlayer.off('pause').on('pause', function () {
  $('.wrapper').removeClass('playing').addClass('paused');
});

2. 调整脚本加载顺序 #

将Vimeo播放器的初始化、事件绑定逻辑调整到GTM代码加载完成后再执行，不要放在GTM之前加载，避免GTM的脚本覆盖你初始化的实例。如果是原生JS可以监听load事件后再执行初始化逻辑：

window.addEventListener('load', function() {
  // 把上面的播放器初始化、事件绑定逻辑放在这里
})

3. 修复CSS语法错误 #

把错误的CSS选择器末尾的多余句号删除：

/* 修复前 */
.playing .text-playing.
.paused .text-paused {
  display: block;
}

/* 修复后 */
.playing .text-playing,
.paused .text-paused {
  display: block;
}

内容的提问来源于stack exchange，提问作者alexkodr