1

I'm adding video to my website and this works perfect on desktop and on Android Chrome browsers. On iOS Safari however, the video is not shown, it only shows a play button, and not a preview of the video like other browsers.

If I click the play button, it will play the video appears and plays as expected. I am unsure why iOS safari won't show a preview of the video like other browsers and I'd like to resolve it. I have tried disabling and enabling controls, getting rid rid of the jQuery click function entirely and trying a different video. If I were to decide remove the controls, it would look like an empty box and would only work if I clicked in the space the video would be.

Help is appreciated.

HTML

<div class="row video-row">
  <div class="col-sm-12">
    <div class="vid-wrapper">
      <video class="video" controls playsinline>
        <source src="/public/video/grapevine.mp4" type="video/mp4">
        <source src="/public/video/video/grapevine.ogg" type="video/ogg">
        Sorry, your browser does not support this video.
      </video>
    </div><!-- END WRAPPER -->
  </div><!-- END COL -->
</div><!-- END ROW -->
user5854648
  • 1,029
  • 2
  • 11
  • 36
  • What hardware? I have an iPhone XS that won't play any of my html5 video from my server, yet they play fine on older iPhones. iOS versions, secure server settings aside it's consistently breaking the video API on iPhone XS, both Safari and Chrome... Supposedly it's fixed in iOS 13 beta. Further reading: https://stackoverflow.com/questions/52490358/why-did-h-264-mpeg-4-he-aac-stop-working-on-iphonexs-max – Eric_B Jun 19 '19 at 22:26

1 Answers1

1

I know this sounds counterproductive, but if you add autoplay the iOS browser will add an "image". Basically autoplay on iOS will initiate the play (like you've clicked play), but won't actually play (like it's paused on the first frame). This may only work in some contexts, for instance if the video API is being called to load the video with an eventlistener, it will actually autoplay.

UPDATE: Actually, I believe you are looking for poster="../img.jpg" where you are simply defining the poster image in an attribute on the video tag. I'll have to define, create and host the images one way or another. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes

Eric_B
  • 149
  • 10
  • Interesting! That would be problematic for every other device though...would you happen to know how to keep autoplay for iOS to get the first frame but not have it autoplay on Desktops and Androids? – user5854648 Jun 19 '19 at 23:30