Web VTT captions in Azure blob not working even after enabling CORS

Question

I'm looking to have a .vtt caption file play with a mp4 video per http://attendedstorage.com/videotest2.html

However, the .vtt whether hosted s an Azure blob is not being seen. I've tested in Chrome and IE10.

I did set "content-type: txt/vtt".

This issue has three parts:

1) The .vtt is not being read by the browers per Chrome dev tools http://cropme.ru/a672cceae9962b975f15b6ddacfe061e - I could use help figuring out why...

2) I also enabled CORS for the blob service. However when I can't get setting "Access-Control-Allow-Origin: *" or "Access-Control-Allow-Origin: *.attendedstorage.com" working with below tools:

Per http://cropme.ru/546c699f8a1264994c18a624eeaa5060 - Cerebrata AMS - set CORS but does not have http header available for setting "Access-Control-Allow-Origin:*" http://cropme.ru/20ac02af8b883e7cf09f4f076e137770

Per http://cropme.ru/f95fbbcf94c26b65f48163ee4dc98194 - Zudio - cannot set "Access-Control-Allow-Origin: *" Per http://cropme.ru/bad39b334aad865a20ac016f981038be - Cloudberry - allows to set "Access-Control-Allow-Origin: *" but does not keep it when you look if it registered.

I am not at a level yet where I know how to work with the API directly so I prefer to use tools.

3)I also tested the mp4 and vtt inside video folder of the azure website but even on the same domain the vtt is not being recognized. Below the domain headers:

    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

UPDATE: I've revised the version of http://attendedstorage.com/videotest3.html to test linking the video to the track (meaning this should not be in the same domain origin) as to http://attendedstorage.com/test3.mp4 and https://attendedstorage.com/test3.vtt. Below is what Chrome Console says:

    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

This leads me to think that to resolve part 3) of the above described issue, I need to also set the http header in the azure website if that's the "parent of track element" - I'm trying to read up on Azure Powershell but I'd prefer to do it via a GUI or a tool if one exists that allows me to change http headers in attendedstorage.com azure website since it's going to take me a while to understand Powershell. Still I don't understand why this is needed in this scenario since the video and track originate from the same domain as the html files. This also still leaves part 2) issue open since I did enable CORS in the blob but I was not able using tools to change the http header "Access-Control-Allow-Origin:*" in the blob.

Answer 1

One thing I noticed in all the screenshots is that for allowed origins, you're trying to set the value as http://*.attendedstorage.com. My guess is that it is causing problem. The URLs defined in allowed origins should be an exact match to the the actual URLs from which the cross browser request is originating (and this is case sensitive). From the documentation page:

AllowedOrigins: The origin domains that are permitted to make a request against the storage service via CORS. The origin domain is the domain from which the request originates. Note that the origin must be an exact case-sensitive match with the origin that the user age sends to the service. You can also use the wildcard character '*' to allow all origin domains to make requests via CORS. In the example above, the domains http://www.contoso.com and http://www.fabrikam.com can make requests against the service using CORS.

One thing you could try is by specifying the actual domain name (http://attendedstorage.com, https://attendedstorage.com) and see if that helps. If that doesn't work, try by specifying * (i.e. all domain names are allowed) to narrow down the issues.

Answer 2

I am not sure about your scenario. however I faced the same issue last week while uploading my content/blob to cloud directly from JavaScript. The solution to my problem was the way I was creating my SAS (secured access signature), One of the helpful MSDN Blog has helped me, and it might help you all.

The code which I was missing was

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
     });
}

It basically add some rules to SAS Url, and I am able to upload my files to blob.

Answer 3

Regarding to the parent of track element does not have a 'crossorigin' attribute. issue, it does not refer to azure blob storage but to the HTML file where you load the tracks. crossorigin is an attribute to set to the <track \> tag parent, for example, <video controls crossorigin="anonymous">.

If you could solve the issue regarding to set the HTTP headers in azure, adding the attribute crossorigin to your video or audio tag should solve the entire problem.