5

1) I have a mp4 file , which can be played here: http://php.weilomo.com/html/index.html both in mobile and desktop browsers .

2) When I move the same html into my server, nginx+wildfly8.0, this video can only be played in the desktop and not work in mobile browsers (safari or android). The error is: The video could not be loaded, either because the server or network failed or because the format is not supported

Any idea?

Thanks a million .

szatmary
  • 29,969
  • 8
  • 44
  • 57
Li Bin
  • 1,701
  • 3
  • 12
  • 12
  • If iOS and Android can play MP4 from the older `php.weilomo.com` address then same devices can play it when saved elsewhere. This NGINX server is not changing (or converting) the video file, correct? Can you put a link to the html **from your own server** so we check that one since it's not working... – VC.One Jul 14 '16 at 17:17
  • @VC.One here is the same mp4 deployed in wildfly. http://120.26.59.202/cloudviewer/mp4.html 1)I can confirm it is not relevant to nginx. 2) I have re-encoded the clip into webM, it is fine. – Li Bin Jul 15 '16 at 02:19
  • Yeah I checked the file. It plays in Gallery, Video Player & Dolphin browser. But in Chrome browser just blank white screen with correct duration. I think the `profile` of H264 is wrong. Let me investigate a bit more then can advise. – VC.One Jul 15 '16 at 20:37
  • @VC.One We figure it out finally. the url of the mp4 should be with a domain name. IP address can make error happen. I don't know why. Hope this helps and any solution ( just with ip) will be appreciated. – Li Bin Jul 17 '16 at 01:52
  • Excellent. Glad you fixed it. **+1**. Please put that info in the **Your Answer** box. Good for others to know about that IP vs Domain issue. – VC.One Jul 17 '16 at 08:06
  • @VC.One , I have to say sorry. Today I deploy the mp4 in another server with domain name there, but this time no luck any more. The video can not play again . I am mad. – Li Bin Jul 18 '16 at 09:40
  • One more thing, I have made it work in android browsers . But safari , mobile and desktop , not work till now. – Li Bin Jul 18 '16 at 14:15
  • I'm also facing the same issue, mp4 video is playing in Android Browser from local server but when I deploy in nginx server its not working. I tried to browser my website using IP address as well, but no hope. Can you give me some clue? – Somnath Jan 13 '17 at 13:14

2 Answers2

5

You Have to Put "playsinline" as a property of the video or else it won't automatically start playing on the browsers of mobile devices..

Here's an example:

<video id="video" playsinline autoplay muted loop>
<source src="assets/sample.mp4" type="video/mp4"/>
</video>
Ahmedakhtar11
  • 1,076
  • 11
  • 7
1

After several days' struggling, I am pretty sure here is the right answer. Hope this can help others in case they run into the same issue.

To make a mp4 be able to play with html5 video in a web browser, first you should refer to this post : HTML5 - How to stream large .mp4 files?

In my case, when I "Ensure that the moov (metadata) is before the mdat (audio/video data)", the desktop and android browsers can work, but safari won't. Following the clues "Ensure that your web server is configured to serve byte range requests." given in the same post mentioned above, we finally found the root cause comes from a bug of wildfly (https://developer.jboss.org/thread/249279?start=0&tstart=0). Wildfly (at least 8.0) doesn't handle the byte-range request correctly that leads the safari can not play mp4 well. Our final solution is to change the app server from wildfly to apache httpd and work as expected.

That's that.

Community
  • 1
  • 1
Li Bin
  • 1,701
  • 3
  • 12
  • 12