`
cakin24
  • 浏览: 1388060 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

HTML5的video元素和audio元素兼容性

阅读更多
一 介绍
因为各浏览器对音频和视频的支持互不相同,开发者可能希望为<video>和<audio>元素指定多个媒体源,此时可以借助<source>子元素来实现。
 
二 代码
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 音频播放 </title>
</head>
<body>
<h2> 音频播放 </h2>
<audio controls>
	<!-- 让浏览器依次选择适合自己播放的音频文件 -->
	<source src="demo.ogg" type="audio/ogg"/>
	<source src="demo.mp3" type="audio/mpeg"/>
	<source src="demo.wav" type="audio/x-wav"/>
</audio>
</body>
</html>
 
 
三 运行结果

 
四 运行说明
只要该浏览器支持audio元素,无论该浏览器是支持OGG Vobis压缩格式,还是支持MP3格式,或只支持WAV格式,该浏览器总可以找到适合自己的音频格式,因为总可以正常播放。
  • 大小: 4.7 KB
1
0
分享到:
评论

相关推荐

    第31章 video元素与audio元素的基础知识

    在HTML5中,`&lt;video&gt;`和`&lt;audio&gt;`元素是两种非常重要的多媒体标签,它们为网页添加视频和音频内容提供了原生支持,无需依赖Flash等外部插件。本章将深入探讨这两个元素的基础知识,以及如何在实际开发中有效地使用...

    第32章 video元素与audio元素的常用属性

    在Web开发中,video和audio元素是HTML5引入的关键特性,极大地丰富了网页的多媒体体验。本章将详细探讨这两个元素的常用属性,以便开发者更好地掌握它们的使用方法。 首先,`&lt;video&gt;`元素用于在网页中嵌入视频内容...

    浏览器HTML5标签video和audio支持

    为了确保跨浏览器兼容性,通常的做法是为`&lt;video&gt;`和`&lt;audio&gt;`标签提供多个source元素,每个元素指定一个不同格式的文件。这样,浏览器会根据自身支持的格式选择合适的文件进行播放。例如: ```html &lt;video width=...

    Safari HTML5 Audio and Video Guide

    随着HTML5标准的推广和浏览器对它的支持度增加,使用HTML5的Audio和Video元素成为网页开发的一个最佳实践。 文档提到了关于文档的授权和版权问题,强调了除个人使用外,未经Apple公司书面授权,不得复制、存储或以...

    H5 Video标签调用摄像头进行录像,兼容苹果、安卓系统、可在微信浏览器正常使用

    `&lt;video&gt;`标签是HTML5的核心元素之一,用于在网页中嵌入视频内容。它的基本结构如下: ```html &lt;video width="320" height="240" controls&gt; &lt;source src="movie.mp4" type="video/mp4"&gt; ...

    video.js 在ie8 上的兼容demo(附 html5media)

    `html5media` 是一个轻量级的JavaScript库,它的主要目标是解决旧版IE浏览器对HTML5 `&lt;video&gt;` 和 `&lt;audio&gt;` 元素的不支持。它通过模拟这些元素的行为,使开发者能够在IE8等浏览器中使用HTML5视频而无需额外的Flash...

    2010.08.10——— html5之video和audio

    虽然HTML5的`&lt;video&gt;`和`&lt;audio&gt;`标签大大简化了媒体元素的处理,但不同浏览器对这些新特性的支持程度不一。例如,Firefox、Chrome、Safari、Opera和Internet Explorer各有所偏好。开发者通常需要使用JavaScript库如...

    CEF插件使谷歌 正常使用video和audio

    在这种情况下,CEFsharp插件可以更新或增强CEF的功能,确保视频和音频播放的兼容性和性能。 解决此类问题的步骤可能包括: 1. **安装CEF和CEFsharp**:首先,你需要下载并安装CEF库,然后获取与之匹配的CEFsharp...

    html5 audio demo【修复拖动进度条bug】

    HTML5的Audio API是Web开发中的一个重要组成部分,它允许开发者在网页中集成音频播放功能,提供了丰富的交互性和自定义可能性。在这个"html5 audio demo【修复拖动进度条bug】"中,我们可以深入探讨以下几个关键知识...

    html常见兼容性问题

    6. **多媒体支持**:HTML5的`&lt;audio&gt;`和`&lt;video&gt;`标签在不同浏览器中的播放格式可能不同。提供多个源(如MP3、Ogg、WebM等)以确保所有浏览器都能播放。 7. **表单元素和属性**:新的表单元素(如`...

    HTML5 新增元素实例(新增元素已经很详细了)

    HTML5是Web开发领域的一次重大革新,它引入了许多新的元素和特性,旨在提升网页的结构化、可访问性和互动性。在这个实例中,我们将会深入探讨HTML5的一些关键新增元素,以及它们如何通过CSS样式文件(如...

    HTML 5标签、属性、事件及兼容性速查表

    ### HTML 5 标签、属性、事件及兼容性速查表 #### 概述 HTML 5(HyperText Markup Language 第五版)是万维网的核心语言之一,它不仅继承了HTML 4的优点,还增加了许多新特性,旨在使Web更加丰富、互动和多媒体化...

    HTML5 Video/Audio播放本地文件示例介绍

    总之,HTML5的`&lt;input type="file"&gt;`和`URL.createObjectURL`提供了在用户许可下播放本地音频/视频文件的途径,但要注意浏览器的兼容性和安全性问题。在实际开发中,应始终考虑用户隐私和数据安全,遵循最佳实践,...

    Web-前端html+css从入门到精通 119. video标签与audio标签.zip

    本教程聚焦于HTML5中的`&lt;video&gt;`和`&lt;audio&gt;`标签,这两个标签使得在网页中集成多媒体内容变得简单且标准化。它们的引入,极大地提升了用户体验,使网页不仅仅是文字和图片的结合,而是可以包含音频和视频的互动平台...

    IE兼容html5的js

    `html5media`是一个JavaScript库,专门设计用来解决IE浏览器对HTML5 `&lt;audio&gt;` 和 `&lt;video&gt;` 标签的兼容性问题。这个库允许在不支持HTML5原生播放功能的IE浏览器中播放音频和视频内容。它通过JavaScript模拟这些标签...

    unigrid添加html5 dom元素.rar

    8. **安全性与兼容性**:需要注意跨域安全策略,以及不同版本的IE和非IE浏览器对HTML5和DOM的支持情况。 这个压缩包的使用者可能需要了解上述技术,并按照提供的示例或说明来实现将HTML5的特性整合进他们的Delphi ...

    浏览器对HTML5的兼容性分析

    ### 浏览器对HTML5的兼容性分析 #### 一、引言 随着HTML5技术的广泛应用,Web开发人员面临着一个重要的问题:不同浏览器对于HTML5特性的支持程度各不相同。HTML5作为一种新兴的技术标准,旨在提供更加统一、简洁且...

    HTML5 兼容IE浏览器

    7. 对于多媒体支持,HTML5引入了`&lt;video&gt;`和`&lt;audio&gt;`标签,但IE浏览器可能需要Flash或Silverlight插件作为回退方案。确保提供适当的备选方案,以确保所有用户都能访问多媒体内容。 8. 最后,持续测试是关键。使用...

    HTML中audio相关操作

    在HTML中,`&lt;audio&gt;`元素是用于嵌入音频内容的核心工具,它可以让我们在网页上直接播放音频文件,类似于视频中的`&lt;video&gt;`元素。在"HTML中audio相关操作"这个主题中,我们将深入探讨如何使用`&lt;audio&gt;`元素创建一个...

Global site tag (gtag.js) - Google Analytics