Tengo un reproductor de Brightcove y quiero cambiar el botón de reproducción por un botón de pausa cuando el reproductor está en pausa.

este es el jugador:

 <div style=\"position: relative; display: block; max-width: 1515px;\"><div style=\"padding-top: 50.77574047954866%;\"><video id=\"myPlayerID3\" ' + ' data-video-id=\"' + data3.videoId + '\" ' + ' data-account=\"' + data3.accountId + '\" ' + ' data-player=\"' + data3.playerId + '\" ' + ' data-embed=\"default\" class=\"video-js\" ' + ' controls></video>

Y este es el estilo del botón:

 #myPlayerID3 .vjs-big-play-button { display: block; background: url(myurl) 25% center/contain no-repeat; right:0px; left:10%; top:68%; bottom:0; position:absolute; border-radius: 0; width:10%; height: 12%; }

Y este es el código que maneja el evento de pausa:

 $(document).ready(function() { var artist_video = document.querySelector("#artist_video"); var artist_video_play_button = artist_video.querySelector(".vjs-big-play-button") videojs.getPlayer('myPlayerID3').on('pause',function(){ artist_video_play_button.style.background = "url(myurl) 25% center/contain no-repeat"; });

El código se dispara bien cuando el reproductor está en pausa, pero esto sucede:

Aparece el botón de pausa, pero el botón de reproducción no desaparece. Y si reviso los estilos en las herramientas de desarrollo, puede ver que la imagen de "reproducir" está marcada como tachada (propiedad de fondo de #myPlayerID3 ), pero aún está visible en la página:

Si desmarco la casilla de verificación del estilo de fondo en las herramientas de desarrollo, desaparece. ¿Es esto una cosa de renderizado?

He intentado eliminar el estilo como este.

 artist_video_play_button.removeAttribute("style");

o así

 artist_video_play_button.style.background = null;

Pero no funcionó