2

I want to display a custom error message when the browser supports HTML5 and videos but the given video format(.avi, .wma etc) is not supported by the browser.

The below code displays error message when the browser does not support Video tag

<html>
    <body>
    <video controls>

      <source src="Wildlife.wma" type="video/wma">
      <source src="Wildlife.ogg" type="video/ogg">
    <source src="Wildlife.webm" type="video/webm">
    Your browser doesn't support video, you may download the
    /* some message like "wma format is not supported by the browser"*/
    </video>
    </body>
    </html>

I want to add a custom error message, when the format of the video alone is not supported by the browser

Vignesh Subramanian
  • 7,161
  • 14
  • 87
  • 150

2 Answers2

1

Although the <video> element doesn't support different error messages for each type of video, it is possible to do that with JavaScript. Otherwise, just have all the necessary types of video present and also maybe a fallback image. There are sites available to assist with exporting videos to all the popular formats for #html5 <video> tags.

Here's how to check support for various types of video using JavaScript. Most browsers have JavaScript enabled so it should be no problem to report errors for each.

hellork
  • 324
  • 2
  • 8
1

This works for me for older browser

enter image description here

<!DOCTYPE html> 
<html> 

<style>
    .video-error{
     color: red;
   border: 1px solid gray;
    }
    </style>
<body> 

<video width="400" controls>
  <source src="Wildlife.mp4" type="video/mp4">
  <source src="Wildlife.ogg" type="video/ogg">
  <source src="Wildlife.webm" type="video/webm">
  
  <div class="video-error">Your browser does not support HTML5 video.</div>
  
</video>


</body> 
</html>
Rahul
  • 4,294
  • 1
  • 10
  • 12
  • yeah bro, but I am looking for displaying error message when browser supports video, but not the format. For example .avi might not be supported. So in those cases I want to display "video format not supported" error message – Vignesh Subramanian Nov 23 '18 at 07:25
  • I've updated the question details to explain it better. Please check now – Vignesh Subramanian Nov 23 '18 at 07:30