CODEWITHSUNDEEP
htmlvideohtml5-video
user5854648
user5854648

Reputation: 1121

Video looks invisible on iPhone

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 -->

Upvotes: 1

Views: 609

Answers (1)

Eric_B
Eric_B

Reputation: 149

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

Upvotes: 1

Related Questions