Se você estiver tentando reproduzir um vídeo HTML5 com a <video/>
tag, certifique-se de que o Content-Type
cabeçalho correto está sendo enviado para sua mídia de origem.
Alguns navegadores, como o Chrome, parecem dispostos a reproduzir um vídeo independentemente de seu Content-Type
(talvez por meio de sniffing ou extensões de arquivo), mas outros, como o IE, exigem um valor válido e compatível.
Eu encontrei isso ao tentar reproduzir vídeos hospedados no S3 com IE10:
<video controls autoplay>
<source src="http://s3-us-west-1.amazonaws.com/foo/bar.mp4" type="video/mp4" />
</video>
Mesmo com o type
atributo definido como video/mp4
, o IE se recusou a reproduzir o vídeo, dizendo apenas “Fonte inválida” ou “Erro: tipo de vídeo não suportado ou caminho de arquivo inválido”. Algumas pesquisas renderam esta postagem do blog detalhando problemas comuns.
O erro proveniente do elemento de vídeo no IE foi MEDIA_ERR_SRC_NOT_SUPPORTED
. No meu caso, a fonte não era compatível porque o tipo MIME enviado não era compatível.
> curl -I http://s3-us-west-1.amazonaws.com/foo/bar.mp4
HTTP/1.1 200 OK
Date: Fri, 14 Jun 2013 03:24:53 GMT
Last-Modified: Fri, 14 Jun 2013 03:24:40 GMT
Content-Type: application/octet-stream
Content-Length: 9227881
Server: AmazonS3
...
Aparentemente, após enviar o vídeo, o S3 o configura automaticamente Content-Type
para application/octet-stream
, o que o IE não oferece suporte.
Isso normalmente não é um problema ao servir vídeos de um servidor web como o Apache, uma vez que o servidor geralmente é configurado para enviar o Content-Type
cabeçalho com base na extensão do arquivo, mas muitos serviços de armazenamento em nuvem como S3 exigem que você especifique seus próprios metadados.
Estávamos enviando vídeos usando o SDK Ruby da AWS , então a correção era simplesmente especificar :content-type
ao enviar o arquivo via S3Object # write :
obj.write(:content_type => 'video/mp4', ...)
Se você precisa oferecer suporte a uma gama mais ampla de tipos de MIME, considere o uso de mime-types gem e MIME::Types.type_for
.