Hace unos días un compañero estaba teniendo problemas al enlazar los subtitulos generados por el servicio Indexer de Azure Media Services, alojados en una cuenta de Azure Storage.
Como puedes leer en este artículo, para añadir subtitulos a un vídeo debes incluir el elemento track. El mensaje de error de la imagen anterior significa dos cosas: por un lado, al estar los subtitulos alojados en una cuenta de Azure Storage, que debes habilitar CORS en esa cuenta, ya que el origen donde está la etiqueta video no es el mismo que donde están los recursos a utilizar. Por el otro lado, el mensaje dice que no existe la etiqueta crossorigin en el elemento.
La primera parte de la solución al problema es, como decía, habilitar CORS (Cross Origin Resource Sharing) tal y como se explicó aquí y aquí utilizando un código parecido a este:
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Shared.Protocol;
using System;
using System.Collections.Generic;
using System.Configuration;
namespace EnableCORSStorage
{
class Program
{
static void Main(string[] args)
{
var account = CloudStorageAccount.Parse(ConfigurationManager.ConnectionStrings["StorageAccount"].ConnectionString);
var blobClient = account.CreateCloudBlobClient();
ServiceProperties blobServiceProperties = blobClient.GetServiceProperties();
blobServiceProperties.Cors = new CorsProperties();
blobServiceProperties.Cors.CorsRules.Add(new CorsRule()
{
AllowedHeaders = new List<string>() { "*" },
AllowedMethods = CorsHttpMethods.Get | CorsHttpMethods.Head,
AllowedOrigins = new List<string>() { "https://corsoriginattribute.azurewebsites.net" },
ExposedHeaders = new List<string>() { "*" },
MaxAgeInSeconds = 3600
});
blobClient.SetServiceProperties(blobServiceProperties);
Console.WriteLine("Done!");
Console.ReadLine();
}
}
}
También puedes utilizar herramientas como Azure Storage Explorer, posicionándote sobre el apartado Blob Containers y haciendo clic sobre el botón CORS para controlar las reglas sobre esa cuenta.
Por último, debes ocuparte de esa etiqueta crossorigin que se menciona en el mensaje de error. En HTML 5 algunos elementos están proporcionando soporte para CORS, como las etiquetas img y video. Este atributo te permite configurar las peticiones a otros orígenes con dos posibles valores:
- crossorigin=»user-credentials»: Habilita CORS enviando las credenciales del usuario, lo que significa el envío de las cookies, certificado o los valores de la autenticación básica junto con la petición del recurso que se intenta obtener.
- crossorigin/ crossorigin=»anonymous»: También habilita CORS pero sin enviar las credenciales al otro extremo.
Modifica tu código para agregar dicho atributo a nivel de la etiqueta video:
<!DOCTYPE html> <head> <title>HTML 5 video & Azure Media Indexer</title> </head> <body> <video controls crossorigin="anonymous"> <source type="video/mp4" src="https://gismedia.blob.core.windows.net/asset-fed43a5d-1500-80c3-24f1-f1e54cd13e16/IntegrativeMomandWindowsPhoneAppStudio_mid.mp4?sv=2012-02-12&sr=c&si=37ec9973-38ec-4f64-9b9a-79ad3ed30f5b&sig=mzzw77MFtATk8gVB64CzAtO%2Bg2FckI681vQVUAiGUAM%3D&se=2016-08-27T21%3A14%3A08Z" /> <track type="text/vtt" label="English captions" kind="subtitles" srclang="en" default src="https://gismedia.blob.core.windows.net/asset-fed43a5d-1500-80c3-e9f0-f1e54cd16233/IntegrativeMomandWindowsPhoneAppStudio_mid.mp4.vtt?sv=2012-02-12&sr=c&si=7a292122-b4be-4a55-a213-1da140c09886&sig=2PTaVR8xpBXM0rqvGOnsB1q7eYNdqHdSluoqLINC%2F5Y%3D&se=2016-08-27T21%3A42%3A55Z" /> </video> </body> </html>
Y resfreca tu navegador para comprobar que los subtitulos funcionan correctamente. A día de hoy funciona en correctamente en Chrome, Firefox, Opera y Safari.
¡Saludos!