Flowplayer not working with amazon s3 signed urls

Question

Flowplayer doesn't seem to like query strings in the url. Why does this work:

{% extends "base.html" %}
{% block extra_head %}
<!-- 1. jquery library -->
<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<!-- 2. flowplayer -->
<script src="http://releases.flowplayer.org/5.2.1/flowplayer.min.js"></script>

<!-- 3. skin -->
<link rel="stylesheet" type="text/css"
   href="http://releases.flowplayer.org/5.2.1/skin/minimalist.css" />
{% endblock %}
{% block content %}
    <div class="flowplayer">
        <video src="https://mybucketname.s3.amazonaws.com/videos/Quixotic_2012.mp4"></video>
    </div>

{% endblock %}

but this doesn't:

{% extends "base.html" %}
{% block extra_head %}
<!-- 1. jquery library -->
<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<!-- 2. flowplayer -->
<script src="http://releases.flowplayer.org/5.2.1/flowplayer.min.js"></script>

<!-- 3. skin -->
<link rel="stylesheet" type="text/css"
   href="http://releases.flowplayer.org/5.2.1/skin/minimalist.css" />
{% endblock %}
{% block content %}
    <div class="flowplayer">
        <video src="https://mybucketname.s3.amazonaws.com/videos/Quixotic_2012.mp4?Signature=mrsCPFcFOK5tceBieh5Ii%2BewNVk%3D&Expires=1355962607&AWSAccessKeyId=1VDAPQXESPKD9EKFT2R2"></video>
    </div>

{% endblock %}

and what would be a good way or getting flowplayer to work with signed urls?

EDIT: I get this error in the Javascript console: HTTP "Content-Type" of "video/mp4" is not supported. Load of media resource https://mybucketname.s3.amazonaws.com/videos/Quixotic_2012.mp4?Signature=hVStvUqQLIAhY4h%2Bp839LTNmvDo%3D&Expires=1355975423&AWSAccessKeyId=1VDAPQXESPKD9EKFT2R2 failed.

I have verified that the signature is correct. The link works when pasting it into the address bar.

UPDATE: It works if I add type="video/mp4" to the video tag. Now I just need to figure out how to dynamically determine the mimetype of a file object in a Django template. Hopefully it's as easy as {{ object.video.mimetype }}, although that itself is incorrect.

Any details about the problem? Are you getting specific errors on the Javascript console? Can you see if your browser requests the video at a wrong URL (check in Network tab of Firebug or other web dev tool). And obviously: are you sure your URL is signed correctly, i.e. does it work when pasted into the address bar directly? — pixelistik
Edited to answer your questions. Thanks in advance for any help you can give. — KrisF

KrisF KrisF · Accepted Answer · 2012-12-20T04:11:07

In order to get it to work, I had to add a mime type to the video tag, like so:

<video type="video/mp4" src="https://mybucketname.s3.amazonaws.com/videos/Quixotic_2012.mp4?Signature=mrsCPFcFOK5tceBieh5Ii%2BewNVk%3D&Expires=1355962607&AWSAccessKeyId=1VDAPQXESPKD9EKFT2R2"></video>

Using django, to grab the mimetype dynamically, I had to create a templatetag. urlparse is used to strip the query string out of the link so that mimetypes.guess_type can determine the correct mime_type.

#custom_tags.py

import mimetypes
from django import template
from django.conf import settings
from urlparse import urlparse

register = template.Library()

@register.filter
def mimetype(value):
    return mimetypes.guess_type(urlparse(value).path, strict=True)[0]

then putting it together in the template:

{% load custom_tags %}

 <video type="{{ object.video.url|mimetype }}" src="{{ object.video.url }}"></video>

Flowplayer not working with amazon s3 signed urls

1 Answers