如何啓用CORS爲html5視頻加載vtt文件？

html5視頻元素加載保存在不同域中的視頻和vtt文件。

問題未加載

VTT和錯誤Text track from origin has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute.

我的調查

我知道CORS需要使用這樣VTT可以在HTML5中成功地加載。

我已經在服務器端爲CORS啓用了來自任何域的請求。

有些文章說增加crossorigin或crossorigin="anonymous"進`元素可以做這個工作，但它不起作用。該視頻是不是在所有的加載或不同的錯誤出現

我已經把我的代碼在這裏下面

<body> 
 
    <div class="container"> 
 
    <video id="myvideo" controls preload="auto" width="640" height="264" autoplay> 
 
     <source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source> 
 
     <track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default> 
 
    </video> 
 
</body>

來源

2017-08-27 Xi Xiao

我可以證實，video元素的crossorigin=anonymous屬性確實做負載文本跟蹤如預期。

給這個鏡頭。

<video id="myvideo" controls preload="auto" width="640" height="264" autoplay crossorigin="anomymous"> <source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source> <track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default> </video>

最後，請記住，你必須使用一個Web服務器來服務於這個HTML剪斷 - 這不能在本地完成（即file//）。

如果你熟悉node - 安裝http-server，與--cors運行和使用ngrok。

來源

2017-08-28 07:06:09

你好，當我把代碼放在jsfiddle中的時候，它不會去。我也在節點服務器上嘗試過。點擊這裏https://jsfiddle.net/zbg8b0bj/ –

如何啓用CORS爲html5視頻加載vtt文件？

回答

相關問題