CODEWITHSUNDEEP
djangovideoamazon-ec2safari
Muhammad Anas Ahmed
Muhammad Anas Ahmed

Reputation: 51

Safari: Video is not playing from aws or heroku both

I have developed a django-framework websites, in that video is playing in Chrome, Firefox, IE but I am facing problem with playing video on safari mac.

Video is uploaded on aws ec2 ubuntu machine.

<video id="video" muted controls class="col p-0"  poster="http://54.197.43.10/static/images/bg/poster.png" preload="auto">
    <source src="http://54.197.43.10/media/video/cds_1nTIdN6.mp4" type="video/mp4">
    <source src="http://54.197.43.10/media/video/cds_1nTIdN6.ogg" type="video/ogg; codecs=theora, vorbis">
    <source src="http://54.197.43.10/media/video/cds_1nTIdN6.webm" type="video/webm; codecs=vp8, vorbis">
</video>

Is there anything which block server videos on safari ??

Upvotes: 1

Views: 1454

Answers (1)

Mick
Mick

Reputation: 25471

Firstly, this is not an answer to the root cause, but it may help you nonetheless.

If you look at the console you will see that you get an error if you play one of the videos in your extract above directly - i.e. put the URL of your mp4 video into the navigation bar of the browser:

enter image description here

However, downloading the video directly from the desktop allows it playback without any error, implying that Safari and Quicktime has no problem with the format itself.

This is an issue that has been reported before and that I personally have not seen a convincing explanation of a root cause for. See some example discussion linked in this answer:

The issue seems to be particular to some servers, and/or possibly some networks.

To verify this, taking the same video file and serving it from a server using a very simple static node http server (https://www.npmjs.com/package/http-server), again results in the video playing back without issue.

Similarly, if you load the same video into an AWS S3 bucket and server it from there it plays without issue on the same safari browser (just verified this).

So, the root issue appears to be some very specific interaction between the server and the browser - you should find the simple server example above will correctly serve the file, and you may find playing with the configuration of your own server will also help.

Upvotes: 1

Related Questions