Question

我希望每个http://attendedstorage.com/videotest2.html播放一个带有mp4视频的.vtt字幕文件

然而，.vtt无论是托管的是Azure blob都没有被看到。我已经在Chrome和IE10中进行了测试。

我确实设置了“content-type：txt / vtt”。

这个问题有三个部分：

1）每个Chrome开发工具http://cropme.ru/a672cceae9962b975f15b6ddacfe061e的浏览器都没有读取.vtt - 我可以帮助找出原因......

2）我还为blob服务启用了CORS。但是，当我无法使用以下工具设置“Access-Control-Allow-Origin：*”或“Access-Control-Allow-Origin：* .attendedstorage.com”时：

Per http://cropme.ru/546c699f8a1264994c18a624eeaa5060 - Cerebrata AMS - 设置CORS但没有http头可用于设置“Access-Control-Allow-Origin：*” http://cropme.ru/20ac02af8b883e7cf09f4f076e137770

Per http://cropme.ru/f95fbbcf94c26b65f48163ee4dc98194 - Zudio - 无法设置“Access-Control-Allow-Origin：*” Per http://cropme.ru/bad39b334aad865a20ac016f981038be - Cloudberry - 允许设置“Access-Control-Allow-Origin：*”，但是当你查看它是否已注册时，它不会保留它。

我不知道如何直接使用API，所以我更喜欢使用工具。

3）我还测试了azure网站视频文件夹中的mp4和vtt，但即使在同一个域中，也无法识别vtt。域名标题下方：

    WEBVTT HEADER 
    Remote Address:137.117.84.54:80
    Request URL:http://attendedstorage.com/test3.vtt
    Request Method:GET
    Status Code:404 Not Found
    Request Headersview source
    Accept:*/*
    Accept-Encoding:gzip,deflate,sdch
    Accept-Language:en-US,en;q=0.8
    Cache-Control:no-cache
    Connection:keep-alive
    Host:attendedstorage.com
    Pragma:no-cache
    Referer:http://attendedstorage.com/videotest3.html
    User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko)              
    Chrome/34.0.1847.116 Safari/537.36
    Response Headersview source
    Content-Length:103
    Content-Type:text/html
    Date:Sun, 20 Apr 2014 23:49:36 GMT
    Server:Microsoft-IIS/8.0
    X-Powered-By:ASP.NET

    MP4 VIDEO HEADER
    Request URL:http://attendedstorage.com/test3.mp4
    Request Headers CAUTION: Provisional headers are shown.
    Accept-Encoding:identity;q=1, *;q=0
    Cache-Control:no-cache
    Pragma:no-cache
    Range:bytes=0-
    Referer:http://attendedstorage.com/videotest3.html
    User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/34.0.1847.116 Safari/537.36

更新：我修改了http://attendedstorage.com/videotest3.html的版本以测试将视频链接到跟踪（意味着这不应该位于同一个域中），而不是http://attendedstorage.com/test3.mp4和https://attendedstorage.com/test3.vtt。以下是Chrome控制台的说法：

    InText track from origin 'https://assetsattendedstorage.com'has been blocked from loading:         
    Not at same origin as the document, and parent of track element does not have a 'crossorigin' 
    attribute. Origin 'http://attendedstorage.com' is therefore not allowed access. 
    videotest3.html:1
    GET http://attendedstorage.com/test3.vtt 404 (Not Found) videotest3.html:1

这让我想到要解决上述问题的第3部分，我还需要在azure网站中设置http标头，如果那是“轨道元素的父” - 我正在尝试阅读Azure Powershell但我更喜欢通过GUI或工具来实现，如果存在允许我更改在attestorage.com azure网站中的http标题，因为它需要我一段时间才能理解Powershell。我仍然不明白为什么在这种情况下需要这样做，因为视频和曲目来自与html文件相同的域。由于我在blob中启用了CORS，但是我仍然无法使用工具来更改blob中的http标头“Access-Control-Allow-Origin：*”。

Answer 1

我在所有屏幕截图中注意到的一件事是，对于允许的来源，您尝试将值设置为http://*.attendedstorage.com。我的猜测是它引起了问题。允许来源中定义的URL应与跨浏览器请求所源自的实际URL完全匹配（这是区分大小写的）。来自documentation page：

AllowedOrigins：允许创建的原始域通过CORS请求存储服务。原始域是请求所源自的域。请注意，来源必须 与用户年龄发送的来源的确切区分大小写的匹配 服务。您还可以使用通配符＆＃39; *＆＃39;允许所有原始域通过CORS提出请求。在上面的例子中，域http://www.contoso.com和http://www.fabrikam.com可以使用CORS对服务发出请求。

您可以尝试的一件事是指定实际的域名（http://attendedstorage.com，https://attendedstorage.com）并查看是否有帮助。如果这不起作用，请尝试指定*（即允许所有域名）以缩小问题范围。

Answer 2

我不确定你的情况。但是我上周在将我的内容/ blob直接从JavaScript上传到云时遇到了同样的问题。我的问题的解决方案是我创建SAS（安全访问签名）的方式，其中一个有用的MSDN Blog 帮助了我，它可能会帮助你们所有人。

我遗失的代码是

private static void ConfigureCors(ServiceProperties serviceProperties)
{
    serviceProperties.Cors = new CorsProperties();
    serviceProperties.Cors.CorsRules.Add(new CorsRule()
    {
        AllowedHeaders = new List<string>() { "*" },
        AllowedMethods = CorsHttpMethods.Put | CorsHttpMethods.Get | CorsHttpMethods.Head | CorsHttpMethods.Post,
        AllowedOrigins = new List<string>() { "*" },
        ExposedHeaders = new List<string>() { "*" },
        MaxAgeInSeconds = 1800 // 30 minutes
     });
}

它基本上为SAS Url添加了一些规则，我可以将我的文件上传到blob。

Answer 3

关于parent of track element does not have a 'crossorigin' attribute.问题，它不是指azure blob存储，而是指加载轨道的HTML文件。 crossorigin是一个设置为<track \>标记父级的属性，例如<video controls crossorigin="anonymous">。

如果您可以解决有关在azure中设置HTTP标头的问题，将属性crossorigin添加到您的视频或音频标记应该可以解决整个问题。

Azure blob中的Web VTT标题即使在启用CORS后也无法正常工作

3 个答案: