0

I have a video tag in HTML5 to show the resources from a mobile app. The users can upload any kind of video with their devices.

This is the tag:

<video width="100%" controls autoplay onended="closeVideo(this)">
    <source src="route.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
    <source src="route.mp4" type='video/webm; codecs="vp8, vorbis"'/>
    <source src="route.mp4" type='video/ogg; codecs="theora, vorbis"'/>
    Your browser can't play this kind of video, sorry.
</video>

Most of the videos work properly, but a few of them display the sound but no the image.

The problem is not in the files, because they work properly if downloaded in the computer. I can't figure out a pattern in the videos that doesn't work, they have different formats, sizes, proportions and fps.

Thanks for your answers

fernandosavio
  • 9,849
  • 4
  • 24
  • 34
Liranan
  • 21
  • 2
  • 6
  • 1
    Try reorder your video source: [HTML5 video won't play in Chrome](https://stackoverflow.com/questions/21004335/html5-video-wont-play-in-chrome-only) – Alireza Jun 08 '17 at 10:08
  • what mobile device/browser? older versions may have more limitations on codecs etc – Offbeatmammal Jun 12 '17 at 23:59
  • Maybe it's just a typo, but `` is definitely not correct, i.e. the `mp4` file extension here. – Johannes Jun 19 '17 at 21:29

1 Answers1

0

I recommend using a transcoding service (SYNQ.fm, Encoding.com, Amazon Elastic Transcode, Zencoder) to convert the videos that your users upload, this way you can guarantee they will play properly (assuming a video that is uploaded is not corrupt or created with an unknown video codec) since you cannot assume users will upload videos that are already compatible for playback on all the various mobile devices and browsers available. Thus, your code would look something like this:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Where the mp4 file you provide is encoded with H.264 codec and the ogg file provided is encoded with the Ogg codec. In terms of transcoding, I recommend that the video files that are uploaded to your system are transcoded into mp4 and either webm or ogg. This will also help make your app more reliable in terms of playback and since you define the video outputs you will get consistency instead of different dimensions, fps, codecs etc.

Here is some documentation that can help: https://www.w3schools.com/html/html5_video.asp , this will also tell you what browsers are compatible with what video codec as well as what browsers support HTML5 video.

l33tstealth
  • 821
  • 8
  • 15