0

As per title, I am trying to render a Jinja2 template with an html5 tag using a Flask backend on Google App Engine. It works with no problems of chrome/firefox (windows/android) but no luck on safari for iOS (tested on iphone 7). 

    <video id="media-video" width="100%" muted controls>
            <source src="{{url_for('static', filename = 'test.mp4')}}" type="video/mp4">
            Not supported
    </video>

I have searched and read about it (e.g. HTML5 Video tag not working in Safari , iPhone and iPad) but my case seems somehow different ... no errors are displayed but the video does not seem to be loaded (the video is h.264).

Any idea on why? Are flask/google-app-engine adding complexity to the problem?

ignzz
  • 23
  • 2
  • 5
  • Plug your iPhone into your computer, and enter Developer mode in Safari. You can debug the browser response on your phone via your computer – GAEfan Jun 26 '17 at 19:04
  • thanks @GAEfan, I just did that. No error but the resource is not loaded and there is no transferred content for it ... can it be related to missing headers ? I tried: r = make_response(render_template('xxx.html')) r.headers['Accept-Ranges'] = 'bytes' – ignzz Jun 26 '17 at 22:09
  • When you inspect the video tag, what is the url? Is it malformed? And for troubleshooting, add a height tag. – GAEfan Jun 26 '17 at 22:43
  • thanks, I tried both things as well. The url seems OK (relative path), I also tried hardcoding the full path and serving the file from google storage ... – ignzz Jun 26 '17 at 23:03

1 Answers1

0

Try a different tag structure:

<video id="media-video" 
       width="100%"
       src="{{url_for('static', filename = 'test.mp4')}}" 
       type="video/mp4"
       muted controls
>
</video>
GAEfan
  • 11,244
  • 2
  • 17
  • 33