给VTT字幕一个褪色的效果

Question

目前，我正试图在本地托管的页面上实现或测试一个新功能，该功能可以播放带有字幕的视频。字幕格式为VTT。

我一直试图找出如何真正能够编辑VTT本身，因为我试图给字幕的褪色效果。

这可能没有什么帮助，但我只是尝试通过项目的style.css部分来实现它，但遗憾的是，它只影响页面的文本，我不知道如何使它适用于来自VTT文件本身的文本。

下面是我试着在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;
     }     
}

Answer 1

有一个*线索选择器来修改视频上的字幕文本。

但并不是所有的css属性都被允许。您可以更改颜色或不透明度，但不能设置动画属性。

无论如何，您可以做的是使用css变量来设置不透明度，而css变量可以随动画而改变。

: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;
}

一个有用的例子可以找到这里。