11

世界で最も単純な 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>

終わり！

プレーヤーがキャプションがあることを認識しているのに、表示しないのはなぜですか? 現在、さまざまなビデオと字幕ファイルを試しています。

4

10 に答える 10

24

トラック タグは、コンテンツが Web サーバーで提供されるときに機能します。また、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 サーバーの場合、.htaccessファイルを Web ディレクトリに追加し、その行を記述して字幕の MIME タイプを追加します。

AddType text/vtt .vtt
于 2013-03-07T10:35:16.657 に答える
1

特殊文字が正しく表示されるように、ファイルが UTF-8 として保存されていることを確認してください。

于 2013-12-08T00:44:11.813 に答える
0

試す

<video id="player" controls>
  <source src="http://video-js.zencoder.com/oceans-clip.mp4">
  <track kind="captions" src="_tracks/test.vtt" default>
</video>

source タグが存在しない場合、ほとんどのブラウザーは video タグ内の残りの部分を無視します。

于 2018-05-03T18:22:24.167 に答える