All geek questions in one place

How to play mp4 video file with HTML5 video tag on iOS (iPhone and iPad)?

I want to display HTML5 video to my users using a video tag. For Firefox, Chrome, and Opera, WEBM works as expected. Safari on Windows and Mac runs my version of MP4. The only problem I am facing is that it will not play on iPad and iPhone (Safari, of course).

Create video

MP4 (h.264 + acc-lc) is converted as follows (with profile: baseline and level 3.0 for maximum compatibility with iOS):

  • Stream No. 0: 0 (eng): Video: h264 (low-key baseline) (avc1 / 0x31637661), yuv420p, 640x352, 198 kb / s, 17 fps, 17 tbr, 17408 tbn, 34 tbc (default)
  • Stream # 0: 1 (eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 56 kb / s (default)

Edit: All ffprobe output (minor changes in bit rates, etc. to the above):

Metadata: major_brand : isom minor_version : 512 compatible_brands: isomiso2avc1mp41 encoder : Lavf56.30.100 Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s Stream #0:0(eng): Video: h264 (Constrained Baseline) (avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr, 12800 tbn, 50 tbc (default) Metadata: handler_name : VideoHandler Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 85 kb/s (default) Metadata: handler_name : SoundHandler

I found various requirements for iOS devices such as this and this , as well as someone mentioned to add the yuv420p pixel format when converting.

Actually ffmpeg cmd looks like this:

 ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4

Display video

Using Modernizr, I determine which format is "supported" and add it to the src or video tag. The latter adds the correct MIME type. For mp4, I add type="video/mp4" . Full video tag code:

 <video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"/>

I tried different ways: my own implementation with my own interface, controls, etc. from browser and .js video providers to check if I'm too much for this. All work in the environments listed above, with the exception of the iPhone and iPad.

I read this article on Video on the Internet , especially this part and only serve the “right” file with the “right” type without a set of poster attributes.

My apache has

 AddType video/mp4 mp4 m4v f4v f4p AddType video/ogg ogv AddType video/webm webm

And byte ranges are included. This is necessary to receive partial content from the server.

Can someone tell me what is going on there? Thanks in advance!

Edit: Safari and Chrome both throw MEDIA_ERR_SRC_NOT_SUPPORTED Error on iPad. There must be a problem with the encoding.

+6
source share
2 answers

I found the reason the iPad and iPhone will not play it. My folder has limited access through htaccess to protect the beta application. Firefox etc Forwarding username and password to all requests, Safari on Mac again asks for credentials, but browsers on iPad and iPhone will not. To quickly check this one , I removed the folder protection and it worked perfectly . Thank you for all the contributions and thoughts about my problem!

+2
source

Try toggling the controls ' attribute or else src .

  <video src="http://example.com/path/mymovie.mov" controls height=340 width=640 poster="http://example.com/path/poster.jpg"> </video>

Check out this article "About HTML5 Audio and Video for Safari" (Developer's Guide)

In addition, good stable support for the HTML5 <video> for iPad / iPhone JW player. (works with him)

  jwplayer('video').setup({ flashplayer: '/Scripts/jwplayer/player.swf', file: 'seanpenn.mp4', autostart: false, controlbar: 'over', image: 'spicoli.jpg', width: 295, height: 214, skin: '/Scripts/jwplayer/glow.xml', stretching: 'exactfit' });
+2
source

Source: https://habr.com/ru/post/985335/

More articles:


All Articles