Question

我很擅长在HTML 5中使用音频标签，并希望构建一个播放器。我想在轨道标签中使用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和＃34; anonymous＆＃34;的预期值的令人困惑的文章。和＆＃34;用户证书＆＃34;。尝试两者都会导致类似的错误。

关于为什么这样做不起作用的任何想法？

Answer 1

这是一篇旧帖子，但是第一次点击谷歌搜索Text track from origin 'SITE_HOSTING_TEXT_TRACK' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'SITE_HOSTING_PAGE' is therefore not allowed access.

OP似乎在本地遇到此问题，他可以通过禁用Chrome的网络安全性来解决这个问题，如上所示。但是，当访问来自不同域的文本轨道时，用户将更经常看到这一点。要在所有用户的生产环境中修复它，您需要做两件事：

将正确的CORS标头添加到托管VTT文件的站点。
将crossorigin="anonymous"属性添加到您网站的音频/视频元素。

如果您无法访问托管视频文件的网站，则可能会遇到问题。但是如果你这样做，你应该添加标题Access-Control-Allow-Origin:'*'。我在Node / Express服务器上处理它，如下所示：

   var app = express()
    app.use(function (req, res, next) {
      res.header('Access-Control-Allow-Origin', '*')
      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
      next()
    })

音频/视频元素更容易修复。在您网站的HTML页面中，添加以下属性。

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

我希望这个答案有助于某人......排除故障是个烦人的问题。

Answer 2

有关具有本机WebVTT支持的浏览器的更新列表，请参阅here。如果您的浏览器不支持将本机CC作为WebVTT，则必须在JavaScript中构建自己的解析器以显示它们（请注意，还有其他CC格式，如SRT和TTML / DFXP）。

您可以找到有关曲目元素here和here的可靠信息。请注意，所谓的字幕，标题和说明之间存在差异。

大多数浏览器在与音频标签一起使用时都不支持音轨标签 - 虽然理论上它们应该 - 但实际上它会发现它在今天不起作用。也许它与WebVTT有关，这意味着Web Video Text Tracks。这被描述为here。

如果要在音频标签上显示隐藏式字幕，则必须构建自己的解析器。我建议你看一下mediaelementjs的来源，以了解如何解决这个问题。

仅当您请求与托管音频/视频标记的页面不在同一域中的CC文件时才需要CORS。在您的情况下，它不应该是必要的。有关CORS的更多信息。

您的错误消息似乎表明您的系统中某处存在配置错误（可能您的vtt文件位于NFS上？）。

Answer 3

我一直在处理同样的问题：媒体播放器工作正常，但隐藏式字幕文件会遇到跨域问题。有些浏览器会窒息，有些则不会。某些浏览器需要特定的CORS策略，并且不允许在允许的源中接受通配符。这让我的生活变得复杂。

我们可以将字幕文件存储在主内容服务器上。但我们更喜欢将视频和字幕文件保存在同一位置（在我的例子中，在Amazon Web Services S3 / CloudFront上）。为了解决CORS的复杂问题，我们构建了一个小型服务器端脚本来从CDN中获取微小的字幕文件。这消除了所有跨域问题。

Answer 4

我遇到了很多错误，我在这里列出了所有这些错误，以防万一它可以帮助某人：

与CORS相关的第一个错误与他在问题中提到的OP完全相同。

来自原文的文字追踪＆＃39; file：//＆＃39;已被阻止加载：不在与文档相同的原点，以及track元素的父元素没有 a＆＃39; crossorigin＆＃39;属性。起源＆＃39; null＆＃39;因此是不允许的访问。

问题是我在浏览器中直接从磁盘加载我的html文件，因此当它尝试访问vtt文件时，浏览器会产生交叉原始请求的感觉，从而产生错误。您可以通过在IIS等Web服务器中托管您的网页来消除此错误。在IIS中创建网站是一个2分钟的工作。或者您只需在现有的＆＃34;默认网站＆＃34;中添加一个新的应用程序。默认安装IIS。

当您开始像网站一样抓取您的html页面时，所有文件（如视频或* .vtt）都是相对的，因此CORS问题得到解决。

CORS问题解决后，我开始收到* .vtt文件的错误：

无法加载资源：服务器响应状态为404 （未找到）

现在，这个问题与* .vtt是IIS的未知文件类型有关，而且您的IIS未配置为服务器扩展名为.vtt的任何资源。为此，您需要在IIS中为Web应用程序配置MIME类型，并提供以下详细信息：

File Name Extension: .vtt
MIME type: text/vtt

这解决了我的文件未找到错误。

现在开发人员工具控制台选项卡中没有显示任何错误，但我的字幕仍未显示。然后是最后一招。我忘记在跟踪代码中提及default属性，如下所示。这是浏览器选择适当的vtt文件的强制性提示：

＆＃13;

<track label="English" kind="subtitles" srclang="en" src="./data/abc.vtt" default />

＆＃13;

现在我的字幕终于奏效了：）

Answer 5

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

添加crossorigin =＆＃34;匿名＆＃34;到视频标签，以允许加载VTT文件来自不同的领域。

这是一个奇怪的问题，即使您的CORS在服务器上设置正确，您可能需要将HTML标签标签本身作为匿名使CORS策略起作用。

Answer 6

以下是我如何通过单独的 HTTP 调用获取 webVTT 并将内容注入 <track> 元素的 SRC 属性，从而在我的网络组件（基于 lit-html）中工作跟踪更改或呈现：

<video class="video__player" @click=${e=> this._onVideoPress(e)}
          poster=${this.poster}
          preload="auto"
        >
          <source src=${this.URL} type="video/webm" />
          <source src=${this.URL2} type="video/mp4" />

          <track
            default
            kind="metadata"
            type="text/vtt"
            @cuechange=${e => this._doSomething(e)}
            src=${this.metadata}
          />
        </video>

  updated(changedProperties) {
    if (changedProperties.has('metadata')) {
      const tracks = this.shadowRoot.querySelectorAll('track');
      tracks.forEach(track => this.loadTrackWithAjax(track))
      }
    }
  

  // eslint-disable-next-line class-methods-use-this
  loadTrackWithAjax(track) {
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState === 4 && this.status === 200 && this.responseText) {
        // If VTT fetch succeeded, replace the src with a BLOB URL.
        const blob = new Blob([this.responseText], { type: 'text/vtt' });
        track.setAttribute('src', URL.createObjectURL(blob));
      }
    };
    xhttp.open('GET', track.src, true);
    xhttp.send();
  }

我的视频和曲目存储在同一个 firebase 存储桶中，但即使更改了 CORS 和 crossorigin 设置（这甚至停止加载视频），浏览器也拒绝加载曲目。

Answer 7

如果您收到404：找不到，可能要在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和其他内容阻止了内容。

加载VTT文件时出现Crossorigin错误

7 个答案: