HTML5 Video problem on iOS devices when using Flask development server

[spmacdonald]

When I render this template and serve it using the development server, it works correctly in Chrome, Safari and IE:

<video id="video" controls>
  <source src="{{ url_for('static', filename='videos/trailer.mp4') }}" type="video/mp4">
  <source src="{{ url_for('static', filename='videos/trailer.webm') }}" type="video/webm">
</video>

When I try to load the same page with an iOS device I see the following exception:

192.168.0.116 - - [10/Apr/2013 10:42:57] "GET /static/videos/trailer.mp4 HTTP/1.1" 200 -
----------------------------------------
Exception happened during processing of request from ('192.168.0.116', 52979)
Traceback (most recent call last):
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/SocketServer.py", line 284, in _handle_request_noblock
    self.process_request(request, client_address)
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/SocketServer.py", line 310, in process_request
    self.finish_request(request, client_address)
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/SocketServer.py", line 323, in finish_request
    self.RequestHandlerClass(request, client_address, self)
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/SocketServer.py", line 641, in __init__
    self.finish()
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/SocketServer.py", line 694, in finish
    self.wfile.flush()
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/socket.py", line 303, in flush
    self._sock.sendall(view[write_offset:write_offset+buffer_size])
error: [Errno 32] Broken pipe

If I replace the template with:

<video id='video'
    controls preload='none' 
    poster="http://media.w3.org/2010/05/sintel/poster.png">
    <source id='mp4'
    src="http://media.w3.org/2010/05/sintel/trailer.mp4"
    type='video/mp4'>
    <source id='webm'
    src="http://media.w3.org/2010/05/sintel/trailer.webm"
    type='video/webm'>
    <source id='ogv'
    src="http://media.w3.org/2010/05/sintel/trailer.ogv"
    type='video/ogg'>
    <p>Your user agent does not support the HTML5 Video element.</p>
</video>

Taken from, http://www.w3.org/2010/05/video/mediaevents.html

The video plays as expected on all devices I have tried it on (iPad and iPhone)

[untitaker]

Does the video not play when served through the own server, or does the exception occur without consequences?

[spmacdonald]

The video doesn't play on iOS devices and exception is raised.

In Chrome or Safari the video plays without exception.

[untitaker]

I was able to reproduce a similar issue with Android 4.1. Putting the webm source at the top seems to solve the issue though.

[untitaker]

The player seems to cause the "broken pipe" error every time the mp4 source is listed before the webm one.

e.g. these combos work (fetches the webm source right away)

• ogg, webm, mp4
• webm, ogg, mp4
• webm, mp4, ogg

these don't (it fetches the mp4 source, causes the broken pipe error and loads forever)

• mp4, ogg, webm
• mp4, webm, ogg
• ogg, mp4, webm

ogg never seems to be loaded. I fetched the example videos from the w3.org links you posted. The code i used to embed the videos:

import flask

app = flask.Flask(__name__)

@app.route('/')
def index():
    return """<video controls width="400" height="200">
        <source src="/static/trailer.mp4" type="video/mp4">
        <source src="/static/trailer.webm" type="video/webm">
        <source src="/static/trailer.ogv" type="video/ogg">
    </video>"""

app.run(debug=True, host="0.0.0.0")

[untitaker]

@spmacdonald Can you try every possible ordering of the source elements either for iOS? After all, this rather seems to be a bug in the browser than in Flask or Werkzeug.

[stefanrush]

I had the same problem on a project that required HTML5 video, but it was with a django development server. I don't think this is a bug in flask.

As for the iOS issue, try adding the webkit-playsinline attribute to the video tag:

<video id="video" controls webkit-playsinline>
..
</video>

[ghost]

BTW, you're using Werkzeug developer server. I think this bug should be moved there.

[DasIch]

Does this also occur if the development server is used with threaded=True?

[nzjrs]

Hey, I've hit this too. It happens with threaded=True and threaded=False

I get this traceback

----------------------------------------
Exception happened during processing of request from ('127.0.0.1', 35343)
Traceback (most recent call last):
  File "/usr/lib/python2.7/SocketServer.py", line 582, in process_request_thread
    self.finish_request(request, client_address)
  File "/usr/lib/python2.7/SocketServer.py", line 323, in finish_request
    self.RequestHandlerClass(request, client_address, self)
  File "/usr/lib/python2.7/SocketServer.py", line 640, in __init__
    self.finish()
  File "/usr/lib/python2.7/SocketServer.py", line 693, in finish
    self.wfile.flush()
  File "/usr/lib/python2.7/socket.py", line 303, in flush
    self._sock.sendall(view[write_offset:write_offset+buffer_size])
error: [Errno 32] Broken pipe
----------------------------------------

[nzjrs]

This may be related

http://stackoverflow.com/questions/6063416/python-basehttpserver-how-do-i-catch-trap-broken-pipe-errors

but I don't know why the browser would close the connection

[untitaker]

This issue has been refiled against Werkzeug: pallets/werkzeug#410