Apple iOS 14 iPhone / iPad HTML Video Tag - will not play inline

[andyhill]

Desktop works fine.

<video id="video-tag-1" width="395" height="471" controls muted playsinline autoplay loop>
  <source src="images/blood.mp4" type="video/mp4"></source>
  Your browser does not support the video tag.
</video>

iPhone iOS 14 fails to play perhaps due to the new power management changes. I have read the video tag must be "muted" which it is, also must have "playsinline" which it does.

There is also some chatter about Safari/iOS now uses HTTP byte-ranges for requesting audio and video files.

Can someone please advise how to use html "video" tag with UniGUI/Indy byte-ranges for iOS ?

Playing around "<source src="images/blood.mp4" type="video/mp4"> Range:bytes=0-100000</source>" fictional byte range does not make any difference, also where do I place it.

This is very important for UniGUI to address as Apple (iOS = 4% of all web traffic) and Mobile in general (= 12% of all web traffic) increasing daily.

The video must be played inline within other rendered html content. 

Please advise - thanks in advance

 

 

 

[andyhill]

Farshad, Sherzod - please advise

[andyhill]

My quick and nasty work around sacrifices image quality and excludes audio.

I would love to have the original image quality and accompanying audio so still need help.

        '    <script>'+
        '      function fallback(video)'+
        '      {'+
        '        var img = video.querySelector(''img'');'+
        '        if (img) video.parentNode.replaceChild(img, video);'+
        '      }'+
        '    </script>'+
 

        '    <video autoplay loop muted playsinline>'+
        '      <source src="images/waves.mp4">'+
        '      <source src="images/waves.webm" onerror="fallback(parentNode)">'+
        '      <img src="images/waves.gif">'+
        '    </video>';
 

You can see the results by looking at our experimental website (testing different HTML concepts [non traditional])

https://axfite.com.au

Check out Blood and Waves using both Desktop and then iPhone/iPad.

 

[Farshad Mohajeri]

Please do the following:

Attach a test project with your <video> tag embedded.

Also include your test MP4 file so we can work with it.

This will speed up the task quite a lot!