There are a lot of sub-questions and variables here; not sure how well I can address them all--but I'll give it a try.
The comment by kalhartt steers you correct in regard to simply changing the source. But I'll note that in my experience the behavior you'll see from the various browsers as you go through this process will be inconsistent. I've done some work on this over the past year, and at least at the time it was a poor user experience--the user experienced the video as broken while the browser responds to the change in source and new load. We ended up generating new video elements and switching them out (but even this can be fraught with pitfalls due to differences in which media events each browser is publishing when.)
I'm not positive how you're serving the videos, but the flask development server is blocking (unless you set
app.run(threaded=True)
, I think.)It's also possible you're running into behavior caused by the internal video loading/caching logic in the browser, and you will even observe significant variation in how each browser handles these tasks. A good way to test against this behavior would be to append a unique query string (perhaps with a timestamp) for each load; the videos should happily load (if the server isn't blocking.) If server blocking is the issue it may be worth hosting the videos on S3 until you're ready to focus on how they're delivered.
Another possibility is not destroying the original video object if you suspect it's going to be used again (instead you can pause it, remove it from the DOM, and save a reference to it). If re-use is an unlikely case, though, and especially if you expect the users to play many videos on a single page load, it may be best to discard them. A compromise might be retaining a fixed number of previous video objects.