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

时间:2018-11-23 05:43:28

标签: javascript html css html5 html5-video

当浏览器支持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>

当浏览器不支持仅视频格式时,我想添加自定义错误消息

2 个答案:

答案 0 :(得分:1)

我认为您不能将每种视频类型的单独错误消息直接嵌入<video>元素中。只要确保提供所有必要类型的视频以及一个备用图像即可。 sites available可以帮助将视频导出为#html5 <video>标签的所有流行格式。

您还可以检查对各种视频using Javascript的支持,并以这种方式报告自定义错误消息。

答案 1 :(得分:1)

这适用于较旧的浏览器

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>