2013-03-07 1 views
6

Я пытаюсь сделать простейший html5 видео плеер в мире:HTML5 трек подписи не показывая

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>ST Media Player</title> 
    </head> 
    <body> 
     <video id="player" src="http://video-js.zencoder.com/oceans-clip.mp4" controls> 
      <track kind="captions" src="_tracks/test.vtt" default> 
     </video> 
    </body> 
</html> 

Готово!

Теперь почему игрок узнает, что есть титры, но не показывает их? Я пробовал разные файлы видео и субтитров.

ответ

12

Трек-тэг работает, когда ваш контент подается на веб-сервере. Также не забудьте добавить конфигурацию, которая устанавливает тип mime как файл vtt. Вот мой пример, который работает на IIS:

<video> 
    <source src="video.mp4" type="video/mp4" /> 
    <track src="video.en.vtt" kind="subtitles" 
     label="English Subtitles" srclang="en" /> 
</video> 

для IIS Web.Config Файл:

<configuration> 
    <system.webServer> 
     <staticContent> 
     <remove fileExtension=".vtt" /> 
     <mimeMap fileExtension=".vtt" mimeType="text/vtt" /> 
     </staticContent> 
    </system.webServer> 
</configuration> 

Для Tomcat сервера файл WEB-INF/web.xml:

<web-app> 
    <mime-mapping> 
    <extension>vtt</extension> 
    <mime-type>text/vtt</mime-type> 
    </mime-mapping> 
</web-app> 

Для Apache Server добавьте .htaccess файл в свой веб-каталог и напишите эту строку, чтобы добавить тип титров субтитров:

AddType text/vtt .vtt 
+0

Где я изменять настройки на моем веб-сервере? –

+0

@ThomasTeilmann: Является ли ваш веб-сервер IIS? Если это так, вы должны поместить файл web.config в корневую папку, скопируйте в нее мою конфигурацию. – Canavar

+0

Что относительно сервера Apache? – bakriawad

1

Убедитесь, что файл сохранен в UTF-8, чтобы убедиться, что специальные символы будут отображаться правильно

+0

И тип mime должен иметь кодировку:

0

хорошо, если вы используете хром, есть вероятность, что вам нужно, чтобы запустить его из терминала, и type --disable-web-security, для linux, ... больше на Disable same origin policy in Chrome

0

У меня нет ответа для этого, но пришел к выводу, что это проблема с настройками сервера. Заголовки IE отлично работают на IIS, но не на сервере Nginx при просмотре с IE в качестве клиента.

+1

Поскольку у вас есть релевантная и вероятная полезная информация но не ответ, я бы предложил опубликовать эту информацию в качестве комментария к вопросу вместо ответа. Спасибо! –

+1

Извинения. Использование Stack Overlow – pelicanpaul

0

Вы должны установить mode от textTracks объекта «показывая»:

var video = document.querySelector('YOUR_VIDEO_SELECTOR'); 

video.addEventListener('load', function() { 
    var tracks = video.textTracks[0]; 
    tracks.mode = 'showing'; 
}); 
Смежные вопросы