VTT（字幕）不是從外部URL工作

Question

我想從外部網址播放電影的字幕，但它不起作用，當我嘗試添加vtt文件時，它是loacally存儲然後它的作品。以下是代碼 <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

這聽起來像是你被一個crossorigin訪問問題阻塞。爲了從不同的域訪問VTT文件，則必須滿足兩個條件：

1. 添加正確的CORS頭託管的VTT file網站。您可能無法訪問此網站，但幸好它看起來像正確的標題已被使用：Access-Control-Allow-Origin: *。
2. 將crossorigin =「匿名」屬性添加到頁面的音頻/視頻元素。事情是這樣的：

<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>

我希望這對你的作品。