Mp4 Video Is Not Playing on Mobile Devices and Chrome

MP4 Video is not playing on Mobile Devices and Chrome?

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.

MP4 video working on desktop, not on mobile devices

Accepting and agreeing with the comments that this is a borderline coding question/answer, I'll try to provide an answer but within a coding context(ish...), or at least referring to the tools a developer might typically use to debug this type of problem.

Debugging this type of issue is tricky but it can help to use the debugger tools - you can attach a mobile phone to a Mac/PC and use the Chrome or Safari developer tools to look at the console and the network traffic to try to see the reason for an error like this. Example link (correct at the time of writing, but in case link breaks/moves the summary is: attach device, enable USB debugging; click on inspect button in devices tab to open tools to inspect the device) for instructions for Chrome developer tools here:

• https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Doing this will in your case show that the site is loading fine (expect for an unrelated HTTPS css issue).

You can also view the page source and find the video URL and then open a tab, from the tools window, to play the video directly on the mobile browser.

In your case the video does not play.

Looking at the page source also allows you see that the video player being used if mediaelement.js - most web video playback uses some form of HTML5/javascript player in addition to the video tag.

This player is opensource (https://github.com/mediaelement/mediaelement) so the code can be checked, on GitHub, which provides the ability to search an entire version of the repository for a text string quite easily. Checking for the error string or even parts of it quickly shows that this error is not generated by the player (or not the current version anyway - if you wanted to be meticulous you could make sure and check whatever version is used in your webpage).

This suggests that the issue is with the underlying browser or device video support itself.

Downloading the video and looking at its properties using ffprobe (https://ffmpeg.org/ffprobe.html) shows output including the following:

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'sbsfilm.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 0
    compatible_brands: mp42mp41
    creation_time   : 2017-11-23T19:23:40.000000Z
  Duration: 00:02:06.93, start: 0.000000, bitrate: 10311 kb/s
    Stream #0:0(eng): Video: h264 (High) (avc1 / 0x31637661), yuv420p(tv, bt709), 1920x1080 [SAR 1:1 DAR 16:9], 9989 kb/s, 25 fps, 25 tbr, 25k tbn, 50 tbc (default)

The key information here is the 'High' part which means it is a H.264 High profile video. H.264 has different profiles and many different potential settings and options, so we can't just say that a device will play H.264, instead we need to look at more detail.

Looking at the Android support media types (again at the time of writing...) shows that High Profile is not in the listed supported types (https://developer.android.com/guide/topics/media/media-formats.html):

This is quite likely to be your problem - if you re-encode the video to H.264 Main or Baseline profile and try again the video should work on Mobile devices (baseline is the most supported but does not offer as good compression as Mainline so you may want to experiment to find the best match for your needs).

Mp4 video in html5 video tag not playing in mobile chrome and mobile safari

Very simply there is no support for autoPlay on mobile safari . Please test all android browsers .

I use one trick (or show some popup to use event):

var ONLYONETIME_EXECUTE = null;
window.addEventListener('load', function(){ // on page load
 
      document.body.addEventListener('touchstart', function(e){
    
    if (ONLYONETIME_EXECUTE == null) {   

        video.play();

        //if you want to prepare more than one video/audios use this trick :             
          video2.play();
          video2.pause();
          // now video2 is buffering and you can play it programmability later 
          // My personal testing was maximum 6 video/audio for android 
          // and maybe 3 max for iOS using single click or touch.
          // Every next click also can prepare more audios/videos.

        ONLYONETIME_EXECUTE = 0;
    }

  }, false)
 
}, false)


// It is very usually that user touch screen  ...

Review :

I dont understand ios html5 politic . They stop supporting javascript console logger (i quest now :from ver 5.1 ios) .Auto play disabled , webrtc ...
They wanna device who works perfect. Auto play can be dangerous on load. In near future i expect activation full html5 support on all mobile devices.

New update :
I found this like positive answer :

Since the release of iOS 10 Apple has allowed muted video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/

---

Related Topics