Динамические объекты TextTrack

С помощью новых методов мультимедиа можно динамически добавлять объекты субтитров TextTrack и TextTrackCue в видеоприложения HTML5.

Internet Explorer 11 теперь поддерживает три новых метода добавления объектов TextTrack и TextTrackCue непосредственно из приложения, как изложено в спецификации HTML5 консорциума W3C. Новые методы:

МетодОписание
addTextTrack Добавляет объект TextTrack в текущее видео.
addCue Добавляет новый объект TextTrackCue в TextTrack.
removeCue Удаляет объект TextTrackCue из объекта TextTrack.

 

В Internet Explorer 10 для добавления субтитров в видео вы создаете файл формата TTML или WebVTT и загружаете его с помощью элемента Track. Этот способ хорошо подходил для случаев, когда подсказки создавались заранее, но вы не могли изменить текст после загрузки файла. IE11 обеспечивает большую гибкость, позволяя добавлять дорожки и подсказки в видео, не создавая отдельного файла. Это позволяет использовать субтитры для различных целей в новых приложениях. Когда вы отправляете файл TTML или WebVTT с веб-сервера, нужно передавать правильный тип MIME. На серверах обычно настраиваются типы MIME для видео, а не для текстовых каналов. Файл субтитров можно отправлять клиенту в простом текстовом формате с помощью XMLHttpRequest (XHR), устраняя необходимость использовать тип MIME для файла TTML или WebVTT. Подсказки можно отправлять, задавая только время начала, время окончания и сообщение, а затем добавлять в текстовый канал, создаваемый в клиенте во время выполнения.

Вы также можете создавать средства, позволяющие делать заметки во время просмотра видео, аналогично программе HTML5 Video Caption Maker. Созданные подсказки можно добавлять в текстовый канал и сразу проверять их отображение в видео.

Добавление объектов TextTrack и TextTrackCue

Чтобы добавить объекты TextTrack и TextTrackCue, сначала создайте TextTrack в программном коде. С помощью метода addTextTrack создайте пустой объект TextTrack, присоединенный к элементу video. Для добавления титров в объект TextTrack вы можете вызвать метод addCue, задав параметры времени начала, времени окончания и отображаемого текстового сообщения.

Примечание  Вы можете добавлять подсказки только в объект TextTrack, созданный методом addTextTrack. IE11 выдает сообщение об ошибке InvalidStateError, если применяется к TextTrack, загруженному файлом с элементом Track.

В следующем примере элемент video использует атрибуты controls, autoplay и muted для вывода встроенных элементов управления воспроизведением, запуска видео после загрузки и выключения звука. Если эти атрибуты присутствуют, для них указано значение "true", а если отсутствуют, то значение "false". Поэтому не нужно явно задавать значения. В элементе source задайте исходный файл video. В примере указан универсальный видеофайл. Вы можете заменить его на любое видео формата MP4.

Время начала, время окончания и простое сообщение для объектов TextTrackCue создаются в цикле. Время начала и время окончания задаются таким образом, что каждое сообщение демонстрируется в течение пяти секунд. Подробнее об использовании видео в HTML5: Использование HTML5 для воспроизведения видеофайлов на веб-странице.


<!DOCTYPE html >

<html >
  <head>
    <title>Add Text Tracks example</title>
</head>
<body>

<video id="video1" controls="controls" muted="muted">
     <!-- change to your own mp4 video file -->
  <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4" />   
  HTML5 Video not supported 
</video>

 <script>
   var video = document.getElementById("video1");
   var startTime, endTime, message;
   var newTextTrack = video.addTextTrack("captions", "sample");
   newTextTrack.mode = newTextTrack.SHOWING; // set track to display
   // create some cues and add them to the new track 
   for (var i = 0; i < 30; i++) {
     startTime = i * 5;
     endTime = ((i * 5) + 5);
     message = "This is number " + i;
     newTextTrack.addCue(new TextTrackCue(startTime, endTime, message));
   }
   video.play();
  </script>
</body>
</html>


Удаление объекта TextTrackCue из объекта TextTrack

Вы можете удалить существующий TextTrackCue с помощью removeCue. В этом примере начинается воспроизведение видео и извлекаются подсказки для отображения. Когда объект видит вторую подсказку, он удаляет ее с помощью removeCue, прежде чем она будет отображена.


<!DOCTYPE html >
<html >
  <head>
    <title>Remove Cue example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>

<video id="video1" controls muted autoplay>
    <source src="video.mp4">
    HTML5 Video not supported 
</video>

 <script type="text/javascript">
    var video = document.getElementById("video1");
    var beginTime, endTime, message; 
    var newTextTrack = video.addTextTrack("captions", "sample");
    newTextTrack.mode = newTextTrack.SHOWING; // set track to display
    // create some cues and add them to the new track 
    for(var i=0;i<10;i++){
        beginTime =  i * 5 ;
        endTime = ( (i * 5) +  5);
        message =  "This is number " + i; 
        newTextTrack.addCue(new TextTrackCue(beginTime, endTime, message));
    }
    //  Watch for cue change events
    newTextTrack.addEventListener("cuechange", function () {
            // get current cue, and remove it if it's number 2
            var currentCue = newTextTrack.activeCues[0];             
            if (currentCue.text == "This is number 2") {
                newTextTrack.removeCue(currentCue)
            }            
        },false);
     
  </script>
</body>
</html>


Если используется метод removeCue, то объект TextTrackCue должен соответствовать объекту TextTrackCue в текстовом канале. В противном случае возникает исключение NotFoundError.

Связанные разделы

Использование HTML5 для воспроизведения видеофайлов на веб-странице
TextTrackCue
addTextTrack
removeCue
addCue

 

 

Показ:
© 2014 Microsoft