外部URLからVTT（字幕）が機能しない

Question

外部URLから映画の字幕を再生しようとしていますが、動作しません。また、vttファイルを追加しようとすると、以下はコードです <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <track label="English" kind="subtitles" srclang="en" src="http://devcache.filmflexmovies.com/Test/Movies/2016/6/28/SDFEATUREMOVIE/Creed ENG.VTT" default> </video> 上記のコードは機能しません。しかし、私はvttの内容をコピーしたときに動作します。 <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <track label="English" kind="subtitles" srclang="en" src="abc.VTT" default> </video> 助けてください。

Answer 1

あなたはクロスアクセスの問題によってブロックされているようです。異なるドメインからVTTファイルにアクセスするには、次の2つの条件を満たしている必要があります

1. がVTT fileをホスティングしているサイトに右CORSヘッダを追加します。あなたはこのサイトにアクセスできないかもしれませんが、うまくいけば右のヘッダーが既に使用されているようです：Access-Control-Allow-Origin: *。
2. ページのaudio/video要素にcrossorigin = "anonymous"属性を追加します。このような何か：

<video id="video" crossorigin="anonymous" autoplay controls preload="metadata"> 
 
    <source src="video/sintel-short.mp4" type="video/mp4" /> 
 
    <track label="English" kind="subtitles" srclang="en" src="http://devcache.filmflexmovies.com/Test/Movies/2016/6/28/SDFEATUREMOVIE/Creed ENG.VTT" default/> 
 
</video>

私はこれがあなたのために働く願っています。