Вопрос: Как стилизовать текстовые треки в HTML5-видео через CSS?


Можно ли создавать текстовые треки (например, субтитры и подписи) в видеоплеере HTML5?

Я уже нашел способ сделать это для Chrome:

video::-webkit-media-text-track-container {
    // Style the container
}

video::-webkit-media-text-track-background {
    // Style the text background
}

video::-webkit-media-text-track-display {
    // Style the text itself
}

Кажется, это немного смущает Safari. Он работает, но рендеринг довольно глючный.

Но что более важно: как добиться этого для Firefox и IE?


6


источник


Ответы:


Используйте это для Chrome:

video::cue {
  // add style here
}

Fire Fox:

Пока не поддерживается. Откройте ошибку для реализации :: cue псевдоэлемент - https://bugzilla.mozilla.org/show_bug.cgi?id=865395

Редактировать:
Поддержка FireFox доступна, она работает так же, как в Chrome и Opera. Но поддержка Edge или IE еще не поддерживается.


6



Единственное кроссбраузерное решение, которое я нашел на сегодняшний день: Скрыть текстовые треки видео и использовать свои собственные.

Это позволит вам создавать собственные текстовые узлы с классами, идентификаторами и т. Д., Которые затем могут быть написаны просто через css.

Чтобы сделать это, вы должны использовать методы onenter и onexit текстовых сигналов для реализации собственных текстовых узлов.

var video   = document.querySelector(‘YOUR_VIDEO_SELECTOR’)
    tracks  = video.textTracks[0],
    tracks.mode = 'hidden', // must occur before cues is retrieved
    cues    = tracks.cues;

  var replaceText = function(text) {
        $('WHERE_TEXT_GETS_INSERTED').html(text);
      },

      showText = function() {
        $('WHERE_TEXT_GETS_INSERTED').show();
      },

      hideText = function() {
        $('WHERE_TEXT_GETS_INSERTED').hide();
      },

      cueEnter = function() {
        replaceText(this.text);
        showText();
      },

      cueExit = function() {
        hideText();
      },

      videoLoaded = function(e) {
        for (var i in cues) {
          var cue = cues[i];
          cue.onenter = cueEnter;
          cue.onexit = cueExit;
        }
      },

      playVideo = function(e) {
        video.play();
      };


  video.addEventListener('loadedmetadata', videoLoaded);
  video.addEventLister('load', playVideo);
  video.load();

2



Это работает для хрома,

video::-webkit-media-text-track-container {
    // Style the container
}

video::-webkit-media-text-track-background {
    // Style the text background
}


video::-webkit-media-text-track-display {
    // Style the text itself
}

вы также можете получить некоторую информацию из этих ссылок.

Ссылка 1

Ссылка 2


1



Я приступил к стилизации моих подписей, чтобы иметь черный фон и располагаться ниже видео для Safari и Chrome. Я достиг успеха со следующим кодом в сочетании с редактированием файла .vtt со следующими стилями. Обратите внимание, что вы должны добавить стили в файл .vtt или в сафари ваши подписи будут прыгать, когда появятся элементы управления видео (даже если они скрыты):

4
00:00:09.980 --> 00:00:12.640 line:13 position:50% align:middle 
size:100%
for just the summer but I ended up staying here.

Стили для заголовков хрома и сафари:

Chrome использует видео :: cue background-color и opacity.

video::cue {
  opacity: 1;
  background-color: black;
  font-size: 20px !important;
}

Safari использует -webkit-media-text-track-display-backdrop для фона. Обратите внимание на важность!, Которая переопределяет присущий Safari стиль.

video::-webkit-media-text-track-display-backdrop {
  background-color: black !important;
  overflow: visible !important;
}

Следующее переполнение webkit-media-text-track-display позволяет больше дополнять текст заголовка Chrome:

video::-webkit-media-text-track-display {
  overflow: visible !important;
}

Переполнение видимости важно в следующем коде для Safari, и я устанавливаю подписи под видео с помощью преобразования, которое зависит от фиксированного размера шрифта:

video::-webkit-media-text-track-container {
 overflow: visible !important;
 transform: translateY(30%) !important;
}

РЕДАКТИРОВАТЬ

С некоторой настройкой я закончил использование этого для моего проекта:

Важно: Удалите все встроенные стили из файла .VTT.

Определите, использует ли пользователь хром или сафари.

const rootElement = document.getElementById('root');
const M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];

rootElement.className += "web";
if(M[1] === 'chrome'){
  rootElement.className += " chrome";
} else {
  rootElement.className += " safari";
}

Затем в файле SASS .scss используйте следующие стили. ПРИМЕЧАНИЕ. Если вы не используете SASS, вы можете просто создать класс для видеоэлемента и вложить соответствующие стили.

.chrome {
  video::cue {
    font-size: 24px;
    opacity: 1;
    background-color: black;
    -webkit-transform: translateY(10%) !important;
    transform: translateY(10%) !important;
  }

  video::-webkit-media-text-track-display {
    overflow: visible !important;
    -webkit-box-sizing: border-box;
    background: black;
    padding: 8px;
    border-radius: 16px;
  }


  video::-webkit-media-text-track-container {
    overflow: visible !important;
    -webkit-transform: translateY(40%) !important;
    transform: translateY(40%) !important;
    position: relative;
  }
}

.safari {
  video::cue {
    font-size: 24px;
    opacity: 1;
    background-color: black;
  }

  video::-webkit-media-text-track-display-backdrop {
    background-color: black !important;
    overflow: visible !important;
  }

  video::-webkit-media-text-track-display {
    overflow: visible !important;
    -webkit-box-sizing: border-box;
  }

  video::-webkit-media-text-track-container {
    overflow: visible !important;
    -webkit-transform: translateY(20%) !important;
    transform: translateY(20%) !important;
    position: absolute;
  }
}

1