当浏览器不支持视频格式时显示自定义错误消息答案

【问题标题】：Display a custom error message when the Video format is not supported by the browser当浏览器不支持视频格式时显示自定义错误消息
【发布时间】：2018-11-23 05:43:28
【问题描述】：

当浏览器支持 HTML5 和视频但浏览器不支持给定的视频格式（.avi、.wma 等）时，我想显示自定义错误消息。

当浏览器不支持视频标签时，以下代码显示错误消息

<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>

当浏览器不支持单独的视频格式时，我想添加自定义错误消息

【问题讨论】：

标签： javascript css html html5-video

【解决方案1】：

这适用于旧版浏览器

<!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>

【讨论】：

是的，兄弟，但是当浏览器支持视频而不是格式时，我正在寻找显示错误消息。例如，.avi 可能不受支持。所以在这些情况下，我想显示“不支持视频格式”错误消息
我已更新问题详细信息以更好地解释它。请立即查看

【解决方案2】：

虽然<video> 元素不支持针对每种视频类型的不同错误消息，但可以使用 JavaScript 来实现。否则，只需提供所有必要类型的视频，也可能是后备图像。有sites available 可以帮助将视频导出为所有流行的#html5 <video> 标签格式。

以下是检查对各种类型视频using JavaScript 的支持的方法。大多数浏览器都启用了 JavaScript，因此为每个浏览器报告错误应该没有问题。

【讨论】：