HTML5 video not playing on Ipad/Android

Question

I have an MP4 video that I am trying to play via HTML5 on Android and iPad.

The html code is

<video width="510" height="315" autobuffer controls >
    <source src="video.mp4" type="video/mp4" />
</video>

The media information on the video from VLC is

Stream 0:
    Type: Video
    Codec: H264 - MPEG-4 AVC (part 10) (avc1)
    Resolution: 856x368
    Frame rate: 23.976000
    Decoded format: Planar 4:2:0 YUV
Stream 1
    Type: Audio
    Code: MPEG AAC Audio (mp4a)
    Channels: Stereo
    Sample rate: 44100 Hz

I created the video by converting another using ffmpeg using vcodec libx264 acodec aac

The iPad just shows a play icon with a line through on a black screen

Is this likely to happen because the video is in the wrong format?

L Ryanny L Ryanny · Accepted Answer · 2018-12-27T04:08:02

Today my friend has similar problem; I tried Edge 42 on Windows 10, or FireFox,Google chrome on android, it doesn't play the video. So I use VLC to convert this meida to remove encoding format 'Planar'. Then I can play it on the above browsers.

Software I used: VLC Media Player Version 3.0.3 Vetinari

The media information on the video from VLC is

Stream 0 Codec: H264 - MPEG-4 AVC (part 10) (avc1) Type: Video Video resolution: 759x720 Buffer dimensions: 768x738 Frame rate: 30 Decoded format: Planar 4:4:4 YUV Orientation: Top left Chroma location: Left

After converted, it works, Here is my parameter: Convert Settings Profile [Video for Youtube HD] and edit selected profile, disable Audio codec(because I don't need audio, try it if you need this part), check Video codec -> Resolusion and choose frame size you want. Finally Convert & Save it.

The media information on the video from VLC is

Stream 0 Codec: H264 - MPEG-4 AVC (part 10) (avc1) Language: English Type: Video Video resolution: 758x720 Buffer dimensions: 768x720 Frame rate: 30.689656 Decoded format: Orientation: Top left Chroma location: Left

HTML5 video not playing on Ipad/Android

2 Answers