Synnefo

<video id="okeanos_video" class="video-js" width="640" height="360" controls="controls" preload="auto" poster="{{ OKEANOS_VIDEO_POSTER_IMAGE_URL }}">

    {% for key, value in OKEANOS_VIDEO_URL.items %}

    <source type='video/{{ key }}' {% for , val  value.items %}{{ attr }}="{{ val }}" {% endfor %}/>{% endfor %}

    {% if OKEANOS_MP4_VIDEO_URL %}

    <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->

    <object id="video_flash_fallback" 

        class="vjs-flash-fallback" 

        width="{{ VIDEO_WIDTH }}" height="{{ VIDEO_HEIGHT }}" 

        type="application/x-shockwave-flash" 

        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">

        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />

        <param name="allowfullscreen" value="true" />

        <param name="flashvars" value='config={"playlist":["{{ OKEANOS_VIDEO_POSTER_IMAGE_URL }}", {"url": "{{ OKEANOS_MP4_VIDEO_URL }}","autoPlay":false,"autoBuffering":true}]}' />

        <!-- Image Fallback. Typically the same as the poster image. -->

        <img src="{{ OKEANOS_VIDEO_POSTER_IMAGE_URL }}" width="{{ VIDEO_WIDTH }}" height="{{ VIDEO_HEIGHT }}" alt="~okeanos" title="No video playback capabilities." />

    </object>

    {% endif %}

</video>