MP4 Video is not playing on Mobile Devices and Chrome?

1
votes

Below code is playing a .mp4 (Codec: H.264, AAC, Kind: MPEG-4 movie, created via Quicktime) file just fine on Desktop Safari Browser:

<video poster="video poster link" controls="controls" width="270" height="490"> <source src="video link" type="video/mp4"></video>

However, when attempting on iPhone/iPad safari browser, after clicking play nothing happens. Also, Chrome browser is not playing the video and play button on the middle not showing.

Website is WordPress website and online.

Thank you for your help.

EDIT:

I tried to solve it by adding muted autoplay playsinline loop but none of them seems to work other then Safari desktop.

I converted .mp4 file to .webm and .ogv and did not work.

On Chrome browser, controls seems like greyed/disabled, video is not loading. Poster is visible.

On mobile devices Chrome/Safari controls interacting but video does not play.

I don't need this video to be autoplayed or preloaded. I just need it to be played when pressed play. Very simple.

3
htmlwordpressgoogle-chromevideo-streaminghtml5-video
can you share a link to the real video ... my guess is that it's an encoding issue if it's playing fine on desktop but not mobile – Offbeatmammal

3 Answers

3
votes

<video id="my_video" controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video

Seems fine the code. You can try to verify if the browser can play that format.

<p>Can my browser play MP4 videos? <span>
<button onclick="supportType(event,'video/mp4','avc1.42E01E, mp4a.40.2')" type="button">Test</button>
</span></p>
<script> 
function supportType(e,vidType,codType) { 
  var vid = document.createElement('video');
  isSupp = vid.canPlayType(vidType+';codecs="'+codType+'"');
  if (isSupp == "") {
    isSupp = "No";
  }
  e.target.parentNode.innerHTML = "Answer: " + isSupp;
} 
</script>
2
votes

Turns out, problem is not in the code but which custom HTML widget I used in the website builder.

I have been using Astra theme in WordPress, when adding Custom HTML widget into layout, I was using WordPress HTML widget instead of Astra's HTML widget. Somehow, theme was blocking the WordPress widget.

I am going to leave this answer here in case someone in the future might run into same issue.

0
votes

<video class="embed-responsive-item" width="320" height="240" autoplay loop>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
  <source src="https://www.w3schools.com/html/movie.webm" type="video/webm">
</video>