Estoy usando el complemento videojs-marker para crear un reproductor personalizado que cargue marcadores personalizados.

Cada marcador tiene un "tipo" que determina su color. Sé que puedo dar un atributo de "clase" a cada marcador, pero el problema es que tengo muchos tipos y no quiero crear una clase CSS separada para cada tipo porque será difícil de mantener.

El código para crear los marcadores se parece a esto:

 const markers = this.chapters.map(chapter => ({ time: chapter.time / 1000, markersType: chapter.type, text: chapter.label, class: 'cue-style' }));

La clase CSS de estilo cue se ve así:

 /deep/ .cue-style { background-color: blue; }

lo que quiero es alterar la clase CSS cada vez con un background-color basado en chapter.label

¿Hay alguna forma de alterar la clase predeterminada del marcador en lugar de pasar una nueva clase cada vez?

algo como:

 const markers = this.chapters.map(chapter => ({ time: chapter.time / 1000, markersType: chapter.type, text: chapter.label, markerStyle: { 'background-color': 'red' }, }));