代码之家 › 专栏 › 技术社区 › Vignesh Subramanian

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

html5-video html5 css html javascript

Vignesh Subramanian · 技术社区 · 7 年前

如果浏览器支持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 回复 | 直到 7 年前

hellork 7 年前

我不认为你可以在 <video> 元素直接。只需确保所有必要类型的视频存在,也可能是一个回退图像。有 sites available 帮助将视频导出为所有流行的HTML5格式 <视频> 标签。

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

Rahul 7 年前

对于较旧的浏览器,这对我很有用

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前