Video tag not working on iPhone Safari or Chrome and certain iPads

Question

I'm at the end of my rope with a certain issue of my videos not playing on my iPhone 6 browsers (Safari and Chrome) and certain ipads. It works great on desktop browsers, Android Chrome and even my iPad mini in Safari. I've researched this for a while now, including Stack Overflow but everything I've tried still doesn't play the video on my iPhone (only shows the initial frame image). Here is my video test page where I'm making edits, my code below and what I've tried to fix it based on research:

<section id="video-wrap">   
    <video class="video <?php the_field('header_video_class'); ?>" autoplay muted loop>
      <source src="/video/<?php the_field('header_video'); ?>.mp4" type="video/mp4">
      <source src="/video/<?php the_field('header_video'); ?>.ogg" type="video/ogg">
      <source src="/video/<?php the_field('header_video'); ?>.webm" type="video/webm">
    </video><!-- /video -->
    <div id="video-wrapper">
        <div class="video-caption">
            <?php the_title(); ?>
        </div><!-- /content -->
    </div>
</section>

• I've tried adding the controls parameter back in, no luck
• I've tried adding the video source within the video tag and removing the additional source tags, no luck
• I've also compressed the heck out of my video. This test example is currently 640 × 360, H.264, AAC. Still no luck.
• I've tried removing the video caption overlay in case that was conflicting. No luck.

WHAT AM I MISSING? Thanks in advance for any help!

Solution 1

New Answer (working) :

Well I somehow missed this one little detail "only shows the initial frame image". I've misread the Question as "video does not even try to work" (because it can happen with some models/brands vs H.264 codec).

Acoording to this blog aticle : html5 Video Autoplay on iOS and Android...

Your code should look like (also use low-res MP4 version) :

<video class="video" playsinline autoplay muted loop>

Finally also check : Webkit policy for video section. Maybe it'll be useful to trick the machne.

---

Older Answer :

• I've also compressed the heck out of my video. This test example is currently 640 × 360, H.264, AAC. Still no luck.

Your H.264 video is encoded with incompatible Profile : High @ Level 3.0.

Solution : Re-encode with choosing Main @ level 3.1 (also can try level 4.0).

Since no iOS hardware here, test these re-encode :

Main profile @L3.1 : clip-intro-low_v2.mp4

Baseline profile @L3.0 : clip-intro-low_v3.mp4

PS: You may have a similar issue to this Question (in case it's useful to you).

Solution 2

There is a trick to load a video tag in the safari browser. We simply just need to reload the page where the video tag is placed. And to reload the page we can use this code

 var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('safari') != -1) {
    if (ua.indexOf('chrome') > -1) {
    }
    else {
          // Check if video tag exists
      if (jQuery(document).find('.hero-slideshow .hero-media-wrap video').length > 0) {
        if (window.location.href.indexOf('reload') == -1) {
          window.location.replace(window.location.href + '?reload');
        }
      }
    }
  }

This might not be a permanent solution but we can use this code as quickfix.

setTimeout(function (){
    $('.hero-slideshow .slides .hero-mp4 video').once().each(function(){
      $(this).parent('.hero-mp4').show();
      $(this).get(0).play();
    });
  }, 2000);

Add source to the video tag and add this attribute too.

preload="auto"

<video width="100%" height="100%" loop muted playsinline preload="auto" class="hero-video media-document mac video">
      <source src="VideoSrc" type="video/mp4"></source>
    </video>