11

HTML 5 で audio タグを使用するのは初めてで、プレーヤーを作成したいと考えていました。クローズド キャプションがどのように機能するかを確認するために、トラック タグで VTT ファイルを使用してテストしたかったのです。

これが私のコードです：

<audio controls>
    <source src="myaudio.mp3" type="audio/mpeg">
    <track kink="caption" src="myaudio.vtt" srclang="en" label="English">
</audio>

私が読んだことによると、トラックはオーディオとビデオの両方で機能するはずであり、アクセシビリティの観点からは理にかなっています。意味をなさないのは、ロードしようとして発生するエラーです。

"Text track from origin 'file://' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'null' is therefore not allowed access."

crossorigin 属性を調べると、CORS と「anonymous」および「user-certificate」の期待値に関する混乱する記事がたくさんあります。いずれかを試すと、同様のエラーが発生します。

なぜこれがうまくいかないのかについてのアイデアはありますか?

4

7 に答える 7

8

WebVTT をネイティブにサポートするブラウザーの更新リストについては、こちらを参照してください。お使いのブラウザーがネイティブ CC を WebVTT としてサポートしていない場合は、それらを表示するために JavaScript で独自のパーサーを構築する必要があります (SRT や TTML/DFXP などの他の CC 形式があることに注意してください)。

track 要素に関する信頼できる情報は、こことここにあります。サブタイトル、キャプション、説明と呼ばれるものには違いがあることに注意してください。

ほとんどのブラウザーは、audio タグと一緒に使用する場合、track タグをサポートしません (理論的にはサポートする必要がありますが)。現在のところ、実際には機能しないことがわかります。おそらく、WebVTT とは Web Video Text Tracks を意味します。これについては、こちらで説明しています。

クローズド キャプションをオーディオ タグに沿って表示する場合は、独自のパーサーを作成する必要があります。これに取り組む方法については、 mediaelementjsのソースを参照することをお勧めします。

CORS は、オーディオ/ビデオ タグをホストするページと同じドメインにない CC ファイルをリクエストする場合にのみ必要です。あなたの場合は必要ありません。CORSの詳細。

エラー メッセージは、システムのどこかに設定ミスがあることを示しているようです (vtt ファイルが NFS にある可能性がありますか?)。

于 2014-04-24T14:25:11.480 に答える
4

https://github.com/videogular/videogular/issues/123

video タグに crossorigin="anonymous" を追加して、異なるドメインから VTT ファイルをロードできるようにします。

サーバー上で CORS が正しく設定されていても、CORS ポリシーを機能させるには、HTML タグ ラベル自体を匿名にする必要がある場合があります。

于 2018-01-11T22:11:19.767 に答える
0

"404: not found" エラーが発生した場合は、Web.config に次の行を追加することをお勧めします。

<system.webServer>
    <staticContent>
        <remove fileExtension=".vtt" /> <!--REMOVES SERVER .vtt extention if it exists-->
        <mimeMap fileExtension=".vtt" mimeType="text/vtt" /> <!--ads it again (needed when debuging)-->
    </staticContent>
</system.webServer>
</configuration>

.vttは最初からサポートされていないため、Chrome (とりわけ) はセキュリティ上の理由からコンテンツをブロックすることに注意してください。

于 2018-10-21T09:08:54.380 に答える