给VTT字幕淡出效果

Question

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

我一直在尝试找到如何实际编辑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;
}

一个可以找到工作示例在这里。