HTML5视频CC按钮在单击时消失

Question

当将HTML5视频的SRC链接放在页面上时，TRACK似乎只有在该HTML文件本地存在时才起作用。我们希望将所有视频和字幕文件保存在单独的服务器上，因此这是一个大问题。

如果轨道如下所示，则它们显示正常：

<track src="captions.vtt">

如果 VTT 文件位于另一台服务器上并且曲目如下所示，则当您单击它时，CC 按钮将消失，并且字幕永远不会显示：

<track src="http://anotherserver.com/captions.vtt">

这发生在Chrome和Opera中。在 Edge 或 IE 中根本不显示字幕，但至少按钮不会消失。

Answer 1

从这里更改了我的视频标签：

<video poster="...." controls>

为此，通过添加 crossorigin="anonymous"：

<video poster="...." crossorigin="anonymous" controls>

并将一个 web.config 文件添加到服务器中，该文件包含包含以下内容的所有 VTT 文件：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>