CODEWITHSUNDEEP
pythondjangohtmlherokusafari
Arundas R
Arundas R

Reputation: 770

Videos not playing in safari when using html5 video tag

I am building a website using django. I am trying to include a video in my webpage using html5 tag. My code is given below.

<video controls style="width: 100%; height: 100%;" id="video" preload="none">
                    <source src="{% static 'media/video1.ogv' %}" type='video/ogg; codecs="theora, vorbis"'/>
                    <source src="{% static 'media/video1.webm' %}" type='video/webm'>
                    <source src="{% static 'media/video1.mp4' %}" type='video/mp4'>
                    <p>Video is not visible, most likely your browser does not support HTML5 video</p>
                </video>

But video is not playing in the safari browser. I changed the video to video1.mov file, but still is not playing. I am using heroku for deployment. I checked if Quickstart is installed. It is installed already. The error shown is 

Failed to load resource: Plug-in handled load
http://www.***.com/static/media/video1.mov

Can some one help me to sort this out?

Upvotes: 10

Views: 8990

Answers (1)

Steve Blackwell
Steve Blackwell

Reputation: 5924

Could be an issue with how the MP4 is encoded. I know the question is a little old, but I had the same issue, so in case helps you or somebody else that finds this first like I did:

It seems that QuickTime (which is the plugin that plays MP4s for Safari) only works when the file is encoded with a certain profile. This is specified in question #2 in Apple's FAQ.

Although the protocol specification does not limit the video and audio formats, the current Apple implementation supports the following formats:

Video: H.264 Baseline Level 3.0, Baseline Level 3.1, Main Level 3.1, and High Profile Level 4.1.

Audio: HE-AAC or AAC-LC up to 48 kHz, stereo audio MP3 (MPEG-1 Audio Layer 3) 8 kHz to 48 kHz, stereo audio AC-3 (for Apple TV, in pass-through mode only)

You'll need to encode using one of those video profiles to get it to work with QuickTime, and hence Safari.

If you're targeting iOS devices also, this table might be helpful too, in order to know what you're compatible with:

Baseline 3.0: All devices

Baseline 3.1: iPhone 3G and later, and iPod touch 2nd generation and later.

Main profile 3.1: iPad (all versions), Apple TV 2 and later, and iPhone 4 and later.

Main Profile 4.0: Apple TV 3 and later, iPad 2 and later, and iPhone 4S and later

High Profile 4.0: Apple TV 3 and later, iPad 2 and later, and iPhone 4S and later.

High Profile 4.1: iPad 2 and later and iPhone 4S and later.

And finally, here are the ffmpeg options for creating these encodings: https://trac.ffmpeg.org/wiki/Encode/H.264#AdditionalInformationTips

It's also useful to know that you can just open a file in QuickTime (you don't have to load through Safari) in order to check whether a file works.

Upvotes: 7

Related Questions