0

i'm running a react js app that works perfectly fine on laptop but on the iphone the videos won't play even if you click them. here is the code used to display the videos. I have no error in the developer console of safari either when clicking the video.

<video className='video1' loop autoPlay controls="true" width='50%' height='50%' src='leadmagic.mp4' type='video/mp4'></video>
Nicolas Vriak
  • 79
  • 2
  • 10
  • This is something to do with MIME type/video format of the video. Try using MP4 files with H.264 encoding. Autoplay is disabled by default in iphone.You have to show controls and can be played when user initiates it. – Panther Sep 06 '17 at 09:29
  • Good read on `videos on web` http://diveintohtml5.info/video.html – Panther Sep 06 '17 at 09:30
  • Possible duplicate of [HTML5 Video tag not working in Safari , iPhone and iPad](https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad) – bennygenel Sep 06 '17 at 09:30

1 Answers1

0

Add an event click listener on your video tag and in it something like 

$(".video1").click(function()
{
   this.start()
});

If it doesn't autoplay on your phone it's probably that it isn't available on phone (On Android, I've got the same problem) to avoid the use of mobile data without the user's agreement

RasAlGhul
  • 71
  • 1
  • 5