HTML5 Video tag not working in Safari iPhone and iPad

Question

I am trying to create an html5 web page in which there is a small video like 13s   I converted the flash version of this video into 3 format    ogv using fireFogg    webm using firefogg also and  mp4 using HandBrake application the html script I used in my page     lt video  width  800  height  640  loop preload  false  autoplay  controls tabindex  0  gt     lt source src  xmasvideo video mp4  type  video mp4    gt     lt source src  xmasvideo M amp P-Xmas 2 ogv  type  video ogv    gt     lt source type  video webm  src  xmasvideo M amp P-Xmas webm    gt   lt  video gt    The video is working fine in Chrome and FireFox but not working at all neither in Safari on Desktop nor on iPhone or iPad   the output is simply a blank page that shows the controls of the the video tag but nothing is loaded  Note that the Safari version that I have supports HTML5 video

User · Answer

For IOS  please use only mp4 source file  I have observed one issue in latest safari browser that safari browser cant able to detect source file correctly and because of this  video autoplay doesn t work   Lets check below example -         lt video autoplay loop muted playsinline poster  video thumbnail thumbanil jpg  src  video video mp4  gt           lt source src  video video mp4  type  video mp4  gt  lt  source gt           lt source src  video video webm  type  video webm  gt  lt  source gt        lt  video gt    As I have used mp4  webm in source files  Safari deosnt support webm but still in latest safari version  it would select webm and it fails video autoplay   So to work autoplay across supported browser  I would suggest to check browser first and based on that you should generate your html   So for safari  use below html         lt video autoplay loop muted playsinline poster  video thumbnail thumbanil jpg  src  video video mp4  gt           lt source src  video video mp4  type  video mp4  gt  lt  source gt        lt  video gt    For other than safari          lt video autoplay loop muted playsinline poster  video thumbnail thumbanil jpg  src  video video mp4  gt           lt source src  video video webm  type  video webm  gt  lt  source gt           lt source src  video video mp4  type  video mp4  gt  lt  source gt        lt  video gt

User · Answer

For a  mp4 this works   safari mobile  amp  desktop       lt video height  250  width  250  controls gt       lt source src  video mp4  type  video mp4    gt      Your browser does not support the video tag   lt  video gt    The controls    true    mentioned in an above post make no sence to me as Apple says just use controls on its own   Reference      To use HTML5 audio or video  start by creating an    or    element  specifying a source URL for the media  and including the  controls  attribute   lt video src  http   example com path mymovie mp4  controls gt  lt  video gt      Source   https   developer apple com library content documentation AudioVideo Conceptual Using HTML5 Audio Video Introduction Introduction html  In my dealings   a small digression     I have found that uploading video from iPhone sends it to server as  quicktime  Ironically  this is the problem when trying to play back the video from the server on safari    mobile  amp  desktop     So if   like me   you are experiencing a  quicktime   or anything other than  mp4   problem in safari  here is a work around provided by apple  Note  I m yet to test it myself and I m not all that happy with it at a glance  just providing more info   Reference      Fall Back to the QuickTime Plug-in There is a simple way to fall back to the QuickTime plug-in that works for nearly all browsers   download the prebuilt JavaScript file provided by Apple   ac quicktime js  from  HTML Video Example  and include it in your webpage by inserting the following line of code into your HTML head   lt script src  ac quicktime js  type  text javascript  gt  lt  script gt      Source   https   developer apple com library content documentation AudioVideo Conceptual Using HTML5 Audio Video AudioandVideoTagBasics AudioandVideoTagBasics html   apple ref doc uid TP40009523-CH2-SW6  Update  For  quicktime rename to  mov prior upload to server   in base64 filetype  data video mov      skip ac quicktime js       will then work in html video tag  Hackerdy Hack

User · Answer

I know this is an old post  but the issue still seems to surface under different server environments  None of the above were the solution for me  In my case it came down to web optimization and making use gzip  or rather needing to disable it for videos  I added this to my htaccess file and it took care it  SetEnvIfNoCase Request URI     ogv ogg oga m4v mp4 m4a mov mp3 wav webma  webmv   no-gzip dont-vary I was already using these attributes on my  tag  controls playsinline

User · Answer

Another possible solution for you future searchers   If your problem is not a mimetype issue    For some reason videos would not play on iPad unless i set the controls  true  flag   Example   This worked for me on iPhone but not iPad    lt video loop autoplay width  100   height  100   src    some video mp4  type  video mp4  gt  lt  video gt    And this now works on both iPad and iPhone    lt video loop autoplay controls  true  width  100   height  100   src    some video mp4  type  video mp4  gt  lt  video gt

User · Answer

I had same issue with apple devices like iPhone and iPad  I turned off the low power mode and it worked and you should also include playsinline attribute in video tag like this    lt video class  video-background  autoplay loop muted playsinline gt    It only worked when including playsinline

User · Answer

I ve seen weird issues with a non trusted  development  SSL certificates where mobile Safari will quite happily serve your page but refuses to serve a video to a  fake  SSL certificate even if you ve accepted the certificate   To test you can deploy the video elsewhere - or switch to http  for the whole page  and it should play

User · Answer

If your using in REACT use playsInline this is working in all IOS devices

User · Answer

I had this problem where  mp4 playback in Safari didn t work  but in other browsers it was fine  The error that I was seeing in the console was  error media src not supported  In my case this turned out to be a MIME type issue  but not because it wasn t declared as MIME type in IIS  rather that it was declared twice  once in IIS and also in a web config file   I found this out by trying to download the  mp4 file locally on the server  I removed the config file from the location of the content I was trying to play and it fixed the issue  I could have just deleted the MIME type from the web config file  but in this case the web config file wasn t needed

User · Answer

If your videos are protected by a session-based login system  Safari will fail to load them  This is because Safari makes an initial request for the video  then hands the task over to QuickTime  which makes another request  Since Safari holds the session info  it will pass the authentication  but QuickTime will not   You can see this if you view your server access log     first the request from Safari  then the request from QuickTime  Other browsers just make a single request from the browser itself   If this is your problem  you might have to rework the video access to use temporary tokens or a limited time access from the original request  I ll update this answer if I find a more direct solution

User · Answer

is working but MacOs recently has autoplay policy for user   https   webkit org blog 7734 auto-play-policy-changes-for-macos   I resolved the same issue using a button to enable sound   ejm    x000D   x000D   lt video autoplay loop muted id  myVideo  gt  x000D     lt source src  amazon mp4  type  video mp4  gt  x000D    Sorry  your browser doesn t support embedded videos    x000D   lt  video gt  x000D   x000D   lt button class  pausee  onclick  disableMute    type  button  gt Enable sound lt  button gt  x000D   x000D   lt script gt  x000D  var vid   document getElementById  myVideo    x000D  function disableMute      x000D    vid muted   false  x000D    x000D   lt  script gt  x000D   x000D   x000D

User · Answer

I have faced same issue  Because my video frame size was too big  ie 2248 px apple support  H 264 Baseline Profile Level 3 0 video  up to 640 x 480 at 30 fps  Note that B frames are not supported in the Baseline profile  check this for more info

User · Answer

For future searches as well  I had an mp4 file that I downscaled with Handbrake using handbrake-gtk from apt-get  e g  sudo apt-get install handbrake-gtk  In Ubuntu 14 04  the handbrake repository doesn t include support for MP4 out of the box  I left the default settings  stripped the audio track out  and it generates an   M4V file  For those wondering  they are the same container but M4V is primarily used on iOS to open in iTunes    This worked in all browsers except Safari    lt video preload  yes  autoplay loop width  100   height  auto  poster  http   cdn foo com bar png  gt               lt source src    cdn foo com bar-video m4v  type  video mp4  gt               lt source src    cdn foo com bar-video webm  type  video webm  gt   lt  video gt    I changed the mime-type between video mp4 and video m4v with no effect  I also tested adding the control attribute and again  no effect   This worked in all browsers tested including Safari 7 on Mavericks and Safari 8 on Yosemite  I simply renamed the same m4v file  the actual file  not just the HTML  to mp4 and reuploaded to our CDN    lt video preload  yes  autoplay loop width  100   height  auto  poster  http   cdn foo com bar png  gt               lt source src    cdn foo com bar-video mp4  type  video mp4  gt               lt source src    cdn foo com bar-video webm  type  video webm  gt   lt  video gt    Safari I think is fully expecting an actually-named MP4  No other combinations of file and mime-type worked for me  I think the other browsers opt for the WEBM file first  especially Chrome  even though I m pretty sure the source list should select the first source that s technically supported   This has not  however  fixed the video issue in iOS devices  iPad 3  the new iPad  and iPhone 6 tested

User · Answer

Nothing worked for me except for compressing the video to be under 30mb  That did the trick but with very bad compression

User · Answer

I had exactly the same problem  my HTML video tag played well on Chrome  amp  Mozilla  on Safari - controls appeared but video was blank  I tried to play with all the above attributes  remove add muted  playsInline  etc  and nothing worked  Problem was with servers as described here as well  I had this - DID NOT WORK     lt video    muted   playsInline   controls   style    width   100      gt     lt source src  MfMfVideo  type  video mp4    gt     lt source src  MfMfVideoWebM  type  video webm    gt   lt  video gt    and I just moved my video out to external library and I am fine on Safari now  it WORKS well    lt video    muted   playsInline   controls    style    width   100      gt     lt source src   https   blabla com video dixneuf-video r8xuvc mp4   type  video mp4    gt     lt source src   https   blabla com videodixneuf-video gyquuu webm   type  video webm    gt    Sorry  your browser doesn t support embedded videos   lt  video gt

User · Answer

I have found that although Safari does support HTML5 Video  the Quicktime Player has to be installed in order for this to work  On a site that I built that uses HTML5 Video  the user is alerted when using Safari  telling them they must have Quicktime installed  otherwise they will only be able to see video transcripts  Hope this helps

User · Answer

I had same problem - make sure the url for video asset is coming from secure domain   Our dev environment is http while production is secure   Due to the video being referenced via relative path  it wasn t working on development   Seems to be an issue that apple requires video to be secure

User · Answer

For my use case there were two things    I wasn t using the new attribute   webkit s policy playsinline  My video   mime-type or whathathell wasn t properly encoded  so I used this site to convert it to all formats I needed  https   pt converterpoint com    o

User · Answer

By using this code video will play in all browser in safari as well with ios devices    Go for it everyone  I have used this and working fine           x000D   x000D   lt video autoplay loop muted playsinline poster  video thumbnail thumbanil jpg  src  video video mp4  gt  x000D        lt source src  video video mp4  type  video mp4  gt  lt  source gt  x000D     lt source src  video video webm  type  video webm  gt  lt  source gt  x000D     lt source src  video video mov  type  video mov  gt  lt  source gt  x000D   lt  video gt  x000D   x000D   x000D

User · Answer

As of iOS 6 1  it is no longer possible to auto-play videos on the iPad  According to Apple documentation Autoplay feature is not working on Safari in all ios devices including iPad    Apple has made the decision to disable the automatic playing of video on iOS devices  through both script and attribute implementations   In Safari  on iOS  for all devices  including iPad   where the user may be on a cellular network and be charged per data unit  preload and auto-play are disabled  No data is loaded until the user initiates it     You can read more abut it in this Apple documentation

User · Answer

Adding  playsinline  works for me on Iphone and Ipa if you don t mind your video being muted    lt video muted playsinline gt     lt source src       type  video mp4  gt   lt  video gt    If you don t want your video being muted  but still want autoplay  maybe try to remove muted attribute with js   How to unmute html5 video with a muted prop

User · Answer

Working around for few days into the same problem  and after check  quot playsinline quot  and  quot autoplay quot  and  quot muted quot  ok   quot mime-types quot  and  quot range quot  in server ok  etc   The solution for all browsers was   lt video controls autoplay loop muted playsinline gt       lt source src  quot https   example com my video mov quot  type  quot video mp4 quot  gt   lt  video gt   Yes  convert video to  MOV and type  quot video mp4 quot  in the same tag  Working

User · Answer

What helped in my case was dropping the audio track  It was silent before  but it had to be gone completely   On ubuntu   ffmpeg -i input mp4 -vcodec copy -an output mp4   And safari desktop start to play the video

User · Answer

Just add a muted attribute and everything will work fine   The source of this answer is here  https   webkit org blog 6784 new-video-policies-for-ios      By default  WebKit will have the following policies        lt video autoplay gt  elements will now honor the autoplay attribute  for elements which meet the following conditions           lt video gt  elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks      lt video muted gt   elements will also be allowed to autoplay without a user gesture     If a  lt video gt  element gains an audio track or becomes un-muted without a user gesture  playback will pause     lt video autoplay gt  elements will only begin playing when visible on-screen such as when they are scrolled into the viewport  made visible through CSS  and inserted into the DOM     lt video autoplay gt  elements will pause if they become non-visible  such as by being scrolled out of the viewport           lt video gt  elements will now honor the play   method  for elements which meet the following conditions           lt video gt  elements will be allowed to play   without a user gesture if their source media contains no audio tracks  or if their muted property is set to true    If a  lt video gt  element gains an audio track or becomes un-muted without a user gesture  playback will pause     lt video gt  elements will be allowed to play   when not visible on-screen or when out of the viewport    video play   will return a Promise  which will be rejected if any of these conditions are not met          On iPhone   lt video playsinline gt  elements will now be allowed to play inline  and will not automatically enter fullscreen mode when playback begins      lt video gt  elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone    When exiting fullscreen with a pinch gesture   lt video gt  elements without playsinline will continue to play inline

User · Answer

If someone having same problem i solved it by enabling Byte-Range support on my server  It appears that Safari requires Byte range requests  In my case i use NGINX and i had to add proxy force ranges on  to my config file  Thanks to this answer

User · Answer

Your web server might not support HTTP byte-range requests  This is the case with the web server I m using  and the result is that the video widget loads and a play button appears  but clicking the button has no effect      The video works in FF and Chrome  but not iPhone or iPad   Read more here on mobiforge com about byte-range requests  in Appendix A  Streaming for Apple iPhone      First  the Safari Web Browser requests the content  and if it s an   audio or video file it opens it s media player  The media player then   requests the first 2 bytes of the content  to ensure that the   Webserver supports byte-range requests  Then  if it supports them  the   iPhone s media player requests the rest of the content by byte-ranges   and plays it    You might want to search the web for  iphone mp4 byte-range

User · Answer

I had a similar issue where videos inside a  lt video gt  tag only played on Chrome and Firefox but not Safari  Here is what I did to fix it     A weird trick I found was to have two different references to your video  one in a  lt video gt  tag for Chrome and Firefox  and the other in an  lt img gt  tag for Safari  Fun fact  videos do actually play in an  lt img gt  tag on Safari  After this  write a simple script to hide one or the other when a certain browser is in use  So for example    lt video id  video-tag  autoplay muted loop playsinline gt        lt source src  video mp4  type  video mp4    gt     lt  video gt   lt img id  img-tag  src  video mp4  gt    lt script type  text javascript  gt      function BrowserDetection            Check if browser is Safari  if it is  hide the  lt video gt  tag  otherwise hide the  lt img gt  tag     if  navigator userAgent search  Safari    gt   0  amp  amp  navigator userAgent search  Chrome    lt  0            document getElementById  video-tag   style display   none         else           document getElementById  img-tag   style display   none                               And run the script  Note that the script tag needs to be run after HTML so where you place it is important       BrowserDetection     lt  script gt    This also helps solve the problem of a thin black frame border on some videos on certain browsers where they are rendered incorrectly

[iphone] HTML5 Video tag not working in Safari , iPhone and iPad

Examples related to iphone

Examples related to ipad

Examples related to safari

Examples related to html5-video

Examples related to mobile-safari