浏览器不兼容嵌入的音视频文件怎么办?

虽然HTML5支持ogg、mpeg4和webm的视频格式以及ogg、mp3和wav的音频格式,但并不是所有的浏览器都支持这些格式,因此我们在嵌入视频音频文件格式时,就要考虑浏览器的兼容性问题。表1列举了各浏览器对音、视频文件格式的兼容情况。表1 浏览器支持的视频音频格式

浏览器不兼容嵌入的音视频文件怎么办?

从表1我们可以看出,除了mpeg4和mp3格式外,各浏览器都会有一些不兼容的音频格式。为了保证不同格式的视频、音频能够在各个浏览器中正常播放,我们往往需要提供多种格式的音视频文件共浏览器选择。

在HTML5中,运用source标签可以为video标签或audio标签提供多个备用文件。运用source标签添加音频的基本语法格式如下:

<audio controls="controls">    <source src="音频文件地址" type="媒体文件类型/格式">    <source src="音频文件地址" type="媒体文件类型/格式">    ……</audio>

在上面的语法格式中,可以指定多个source标签为浏览器提供备用的音频文件。source标签一般设置两个属性——src和type,对它们的具体介绍如下。

● src:用于指定媒体文件的URL地址。

● type:指定媒体文件的类型和格式。其中类型可以为“video”或“audio”,格式为视频或音频文件的格式类型。

例如,将mp3格式和wav格式同时嵌入到页面中,示例代码如下所示。

<audio controls="controls">    <source src="music/1.mp3" type="audio/mp3">    <source src="music/1.wav" type="audio/wav"></audio>

source标签添加视频的方法和添加音频的方法基本相同,只需要把audio标签换成video标签即可,其语法格式如下:

<video controls="controls">    <source src="视频文件地址" type="媒体文件类型/格式">    <source src="视频文件地址" type="媒体文件类型/格式">    ……</video>

例如,将mp4格式和ogg格式同时嵌入到页面中,可以书写如下示例代码:、

<video controls="controls"><source src="video/1.ogg" type="video/ogg">    <source src="video/1.mp4" type="video/mp4"></video>

注意:

1.Safari浏览器对于wav音频格式和mp4视频格式的支持,需要把页面部署到web服务器里面。如果只是单纯的用Safari浏览器打开本地的一个静态页面,则浏览器不支持这两种格式。

2.Opera浏览器同样需要把页面部署到web服务器上,才能支持ogg视频文件格式。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/263244.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
黑马程序员黑马程序员订阅用户
上一篇 2023年5月15日 08:30
下一篇 2023年5月16日 07:26

相关推荐

  • 小编教你xhtml如何下载。

    要下载XHTML,您可以通过以下几个步骤进行: (图片来源网络,侵删) 1、了解XHTML: XHTML是一种标记语言,它是HTML的一个更严格和纯净的版本,XHTML遵循XML的规范,要求文档必须是正确标记且格式良好的。 2、查找…

    2024年6月26日
    00
  • 经验分享如何取消选项卡。

    在计算机操作中,取消选项卡通常意味着关闭或移除浏览器中的标签页。具体方法如下:,,1. 点击要关闭的选项卡上的“X”按钮。,2. 使用快捷键:Ctrl+W(Windows)或Cmd+W(Mac)。,3. 右键点击选项卡,选择“关闭”。…

    2024年6月27日
    00
  • 网站设计,如何加快网页速度?

    网站设计,你的网站慢吗?它能更快吗?用户需要快速加载的网站,并继续无滞后地提供内容。如果你的网站可以满足这种需求,用户可以当然不会因为速度而放弃你的网站。今天,我们将看看如何确保您的网站介面是为速度…

    2019年10月26日
    0216
  • 我来教你iframe框架对SEO优化的影响。

      在说到iframe框架对SEO的影响之前,我们先简单的补充下什么是“iframe”?在HTML语言里头,iframe 元素会创建包含另外一个文档的内联框架。简单的理解就是在A页面嵌入B页面。iframe就是嵌套的网页框架,百度等搜…

    2022年12月4日
    010
  • 今日分享网址导航怎么改,手机网址导航怎么没有了呢。

    对不起,由于技术限制,我无法一次性生成1489个字的内容,但我可以为您提供一个详细的回答,并在最后提供一个相关问题与解答的栏目。 关于网址导航的修改,这主要取决于您使用的浏览器和手机操作系统,大多数浏览器…

    2024年7月1日
    00
  • 怎样处理网站建设中浏览器兼容问题。

    在网站开发过程中,无论是图片、文字信息、格局排版都会受到浏览器的兼容问题,因为不同浏览器所兼容的开发代码有所不同,所以可能在开发出来的网站,换个浏览器就会显示不全,出现排版混乱的界面,那么今天小编就…

    2022年10月28日
    019
  • 我来分享杭州网站定制时如何兼容各式的浏览器。

        网站定制时程序员都会装有多款的阅读器,来测试网站的兼容,如果有某种阅读器不能正常显示,就意味着需要调整了,那么杭州网站定制如何兼容各式的阅读器呢?保持格式兼容,很多的网页在建立时用的系统不一样,…

    2023年6月11日
    01
  • 如何在Windows 10的新Edge浏览器上使用Chrome扩展程序

    虽然微软的新款Edge浏览器仍处于测试阶段,但它正在成为原版Edge甚至Chrome的绝佳替代品。它感觉比Chrome更快,并且添加了Chrome扩展程序,现在它具有Edge之前缺乏的多功能性。默认情况下,不会启用Chrome扩展程序…

    2019年4月16日 个人杂笔
    0300

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息