Добавление видео элемента с субтитрами Popcorn TTML

У меня есть страница, где я хочу вставить элемент видео с субтитрами TTML, используя PopcornJS, как вы можете видеть в этой скрипке. Все работает нормально, кроме субтитров. Они не показывают. Когда я делаю что-то вроде <video src="myvideo.mp4" data-timeline-sources="data.ttml" /> субтитры работают правильно.

Так что я делаю что-то здесь не так или просто с PopcornJS невозможно вставить video элемент, установите data-timeline-sources приписать и воспроизвести видео с этим файлом субтитров?

Мой файл субтитров data.ttml выглядит так:

<tt xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling" xmlns="http://www.w3.org/2006/04/ttaf1">
<body region="subtitleArea">
  <div>
    <p xml:id="subtitle1" begin="0.50s" end="2.5s">
      Test subtitle 1
    </p>
    <p xml:id="subtitle2" begin="3.0s" end="5.0s">
      Test subtitle 2
    </p>
    <p xml:id="subtitle3" begin="5.5s" end="8.5s" >
      Test subtitle 3a<br/>
      Test subtitle 3b
    </p>
    <p xml:id="subtitle4" begin="9.5s" end="12.0s">
      Test subtitle 4
    </p>
    <p xml:id="subtitle5" begin="13.0s" end="15.0s">
      Test subtitle 5
    </p>
  </div>    
</body>
</tt>
Источник

1 ответ

Решение

Парсер TTML Popcorn - это скрипт, поэтому поместите его в тег скрипта, как показано в следующих демонстрациях:

IE10 - единственный браузер, который поддерживает TTML изначально. Chrome поддерживает WebVTT. Firefox не поддерживает ни того, ни другого. Вот несколько уроков по каждому из них:

Источник
Другие вопросы по тегам