Actualmente estoy tratando de implementar o probar una nueva función en mi página alojada localmente que reproduce videos con subtítulos. El formato de los subtítulos es VTT.
He estado tratando de encontrar la forma de poder editar el VTT en sí mismo, ya que estoy tratando de dar un efecto de desvanecimiento para el subtítulo.
Esto probablemente no sea útil, pero intenté implementarlo a través de la parte style.css de mi proyecto, pero lamentablemente solo afecta los textos de la página y no estoy seguro de cómo hacer que funcione para los textos del archivo VTT. .
Abajo está la parte que he tratado de resolver en el archivo style.css
.fade-in { animation: fadeIn 2s; } .fade-out { animation: fadeOut 3s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }Hay un selector de ::cue para modificar el texto de los subtítulos en un video.
Pero no todas las propiedades css están permitidas. Puede cambiar el color o la opacidad, pero no puede establecer la propiedad de animación.
De todos modos, lo que podrías hacer es usar la variable css para establecer la opacidad y la variable css podría cambiar con una animación.
:root { --opacity-value: 1 } ::cue { opacity: var(--opacity-value); } @keyframes flickerAnimation { 0% { --opacity-value: 1; } 50% { --opacity-value: 0; } 100% { --opacity-value: 1; } } video{ animation: flickerAnimation 1s infinite; }Se puede encontrar un ejemplo de trabajo aquí .