MP4 video working on desktop, not on mobile device

Question

I embedded a video in the following URL: https://www.speurtochten.nl/over-ons/ I made it with Premiere Pro CC, exported it as H.264.

The code I use in WordPress: [video src="https://speurtochten.nl/sbsfilm.mp4"][/video]

I tried uploading several dummy videos instead (http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4), and they worked perfectly fine on the desktop AND on a mobile phone.

On my iPhone, I get "Error loading this resource".

Answer 1

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