Forums

I am solving strange problem with Flask and HTML5 video. I want to show video in video tag. Video is mp4 with H.264 codec. It is working everywhere except Safari on OSX and safari on IOS. Place with video is blank. When I explore this video through developer tools, safari says unable to load resource. I learnt that it could be related somehow with http headers. So I thought it is because I use default flask developmental server. So I uploaded it on pythonanywhere.com but it is the same. I have video in static folder, my html looks like this:

 <div id="reel-vid">
    <video class="img-responsive" id="video1">                              
    <source src="static/img/showreel_video_L2.mp4" type="video/mp4">                                
    Your browser does not support this video.
    </video>
 </div>

I tried different resolutions, different formats (webm, ogg). Nothing work. Thank you for help.

I don't think it's anything to do with PythonAnywhere... maybe one of our other users will ahve some ideas? Or it may be worth posting to stackoverflow?

My experience is safari has flash errors all the time. Even with an update direct from Adobe and a new .dmg install it fails. I use chrome or firefox on my OS X machines to look at flash. Ha - edited I misread the post

I'm facing exactly the same issue with a video in my static folder. It does not even work when I call the video directly using the path of the static folder like this: "http://USERNAME.pythonanywhere.com/static/media/VIDEONAME.mp4".

I'm using Django. The video file is fine, I tried it in many different ways and Safari is able to play it. However, it does not play if I use pythonanywhere. Is there a fix to this issue?

does:

<source src="static/img/showreel_video_L2.mp4" type="video/mp4">

need to be

<source src="/static/img/showreel_video_L2.mp4" type="video/mp4">

?

more tips in this article on debugging static files

My path is correct and shows the video file on Chrome and Firefox, but not on Safari.

<video id="VideoElement" width="200" height="160" muted controls src="/static/.../VIDEOFILE.mp4"  type="video/mp4"></video>

I've never seen three dots in a URL before?

The full url of the video is: http://mrtolchock.pythonanywhere.com/static/media/fitness/theraband1.mp4

I works on Chrome and Firefox, but not on Safari.

I'm afraid I don't know anything about cross-browser video player issues. As far as I can tell PythonAnywhere is doing its job ok, the video is being served correctly... Maybe try stackoverflow?

I posted the question on Stack Overflow.

The strange thing which I don't understand is that the video does not even work when being played directly by it's url: Play this video with Safari

The file is fine and works well on Quicktime, VLC, Chrome, Firefox, etc. Other mp4 videos on Safari are also shown (from a different host). I can even play the same mp4 file in Safari using my Dropbox instead of the above url.

I could finally solve the issue (in a quite inelegant way though). Instead of linking to the file on pythonanywhere, I use github as a host and it works:

Does not work:

<video id="VideoElement" width="200" height="160" controls muted src="http://USER.pythonanywhere.com/static/video.mp4"  type="video/mp4"></video>

Works:

<video id="VideoElement" width="200" height="160" controls muted src="https://github.com/USER/mysite/blob/master/static/video.mp4?raw=true"  type="video/mp4"></video>

I use exactly the same file and even the same github repository which I pull to pythonanywhere. One possible answer to that could be that pythonanywhere does not support HTTP byte-range requests (?)... well anyway, it works now... thank you very much for your help along the way!

One other possibility might be HTTP vs HTTPS -- perhaps it's not loading from PythonAnywhere because you're using an HTTP URL in an otherwise-HTTPS page?

I just checked, both of these links to the video file don't work if opened with Safari, but work with Chrome and Firefox:

HTTP link

HTTPS link

Thanks for checking that out! I guess you may be right, then -- it might be something to do with the byte-range in the requests.

Hi,

Having the same error mentioned above. Just wondering if there have been any changes to this config on server?

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW1

"HTTP servers hosting media files for iOS must support byte-range requests, which iOS uses to perform random access in media playback. (Byte-range support is also known as content-range or partial-range support.) Most, but not all, HTTP 1.1 servers already support byte-range requests."

Thanks,

Nic

No, we haven't made any changes to the config since that last post :-(

Any updates on this? Facing the same problem. Video plays fine on google chrome but not safari.

Safari plays the video fine on my local though.

Here is an answer --> https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad

If the issue is that we don't support range requests, then we can't do anything about it in the short term. I will raise a ticket to investigate supporting range requests for static files.

Another possibility is that you could serve the content from your web app and implement the range interface there, or perhaps there's a static files implementation for your framework that supports range requests.

Is this issue that I can't play mp4 in safari via Pythonanywhere solved?

I run into this problem also... Link the video from outside pythonanywhere then all OK, linked on python anywhere server it doesn't play..

I'm afraid nothing changed in that area.

And never will? :-(

There is no promise that I can make.

it would be a shame if we had to move our project just because we can't play video in safari ...

It's just not there yet. It's on our to-do list, but without any precise estimation is impossible at a moment.

ok...