Search code examples
video-streaminghtml5-videomp4h.264h.265

How can I embed a VP9 webm, h264 MP4, and h265 MP4 into a single video tag?


I want to put a video tag into an html page. I want it to load a webm video file if their device supports webm, otherwise it will load the h265 MP4, if their device supports h265, otherwise it will fall back to h264 MP4.

<video controls preload="metadata" width="720" >
   <source src="v9.webm" type="video/webm">
   <source src="h265.mp4" type="video/mp4">
   <source src="h264.mp4" type="video/mp4">
</video>

What is the right way to do this? It doesn't seem to have a way to indicate that the first mp4 file is an h265 file and the second is an h264 so the browser or device can appropriately choose the format it can actually display.


Solution

  • So, combining the two responses, I get:

    <video controls preload="metadata" width="720" >
       <source src="v9.webm" type="video/webm; codecs='vp9'">
       <source src="h265.mp4" type="video/mp4; codecs='hev1'">
       <source src="h264.mp4" type="video/mp4; codecs='avc1.42E01E'">
    </video>