<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8" />
<meta name=keywords Content="html5">
<title>example1 input forms </title>
<script type="text/javascript">
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
function fallback(video) {
// replace <video> with its contents
while (video.hasChildNodes()) {
if (video.firstChild instanceof HTMLSourceElement)
video.removeChild(video.firstChild);
else
video.parentNode.insertBefore(video.firstChild, video);
}
video.parentNode.removeChild(video);
}
</script>
</head>
<body>
<audio src="1.mp4" controls onerror="failed(event)">
Your browser doesn't support the audio tag
</video>
<video src="video.avi" controls onerror="failed(event)">
Your browser doesn't not support video tag
</video>
<audio controls="controls">
<source src="1.mp4">
<source src="2.mp4" onerror="fallback(parentNode)">
Your browser doesn't support the audio tag
</audio>
</body>
</html>
浏览器对音频格式的支持：
| 格式 | IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
| Ogg Vorbis | | √ | √ | √ | |
| MP3 | √ | | | √ | √ |
| Wav | | √ | √ | | √ |
浏览器对视频格式的支持：
| 格式 | IE | Firefox | Opera | Chrome | Safari |
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
分享到：
相关推荐
HTML5 引入了 `<audio>` 和 `<video>` 标签，使得在网页中嵌入音频和视频内容变得简单。这两个标签允许开发者直接在网页中播放媒体文件，无需借助Flash或其他插件。通过设置不同的属性（如`src`，`controls`，`...
随着HTML5标准的推广和浏览器对它的支持度增加，使用HTML5的Audio和Video元素成为网页开发的一个最佳实践。 文档提到了关于文档的授权和版权问题，强调了除个人使用外，未经Apple公司书面授权，不得复制、存储或以...
VideoJS是一个开源的HTML5和Flash视频播放器框架，以其简洁的界面和强大的可定制性著称。VideoJS不仅支持常规的视频播放，还提供了许多高级特性，包括自定义皮肤、广告插入和字幕/歌词同步。通过加载相应的插件，...
HTML5是Web开发领域的一次重大革新，其中最引人注目的特性之一就是引入了`<video>`和`<audio>`标签，使得浏览器可以直接内嵌和播放多媒体内容，无需依赖Flash或其他第三方插件。这两个标签极大地提升了用户体验，...
HTML5新增加的audio和video标签让我们增加了很多惊喜，可以让我们更方便的在网页中播放音频和视频。但目前很多浏览器不支持，无法在旧版的IE浏览器中使用。html5media.min.js却是一个能让这两个标签在各种新旧版IE...
- `html5-mario.rar`：可能是基于HTML5的马里奥游戏，HTML5 Audio和Video元素可以用于游戏中的音效和过场动画。 4. **其他HTML5特性**： - HTML5的离线存储（AppCache）和Service Worker可以实现离线应用，提高...
作为HTML5和WebSocket的狂热爱好者，Peter常常在国际大会上发言，还在全球范围内开展HTML5的技术培训。在加盟Kaazing前，Peter在Oracle担任了近十年的资深信息架构师，获得过两项软件专利。 Brian Albers Kaazing...
3.2 使用html5 audio和video api 56 3.2.1 浏览器支持性检测 57 3.2.2 理解媒体元素 58 3.2.3 使用audio元素 62 3.2.4 使用video元素 63 3.2.5 进阶功能 68 3.3 小结 70 第4章 geolocation api 72 4.1 位置...
作为HTML5和WebSocket的狂热爱好者，Peter常常在国际大会上发言，还在全球范围内开展HTML5的技术培训。在加盟Kaazing前，Peter在Oracle担任了近十年的资深信息架构师，获得过两项软件专利。 Brian Albers Kaazing...
作为HTML5和WebSocket的狂热爱好者，Peter常常在国际大会上发言，还在全球范围内开展HTML5的技术培训。在加盟Kaazing前，Peter在Oracle担任了近十年的资深信息架构师，获得过两项软件专利。 Brian Albers Kaazing...
4.1.3 HTML5 Audio和Video的限制 77 4.1.4 audio元素和video元素的浏览器支持情况 77 4.2 使用HTML5 Audio和Video API 78 4.2.1 浏览器支持性检测 79 4.2.2 可访问性 79 4.2.3 理解媒体元素 80 4.2.4 使用...
HTML5 中的 Audio/Video 标签是多媒体内容的基础组件，用于在网页中播放音频和视频内容。今天，我们将深入探讨 HTML5 Audio/Video 标签的各种属性、方法和事件。 HTMLVideoElement 和 HTMLAudioElement 对象 ...
A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and ...
作为HTML5和WebSocket的狂热爱好者，Peter常常在国际大会上发言，还在全球范围内开展HTML5的技术培训。在加盟Kaazing前，Peter在Oracle担任了近十年的资深信息架构师，获得过两项软件专利。 Brian Albers Kaazing...
作为HTML5和WebSocket的狂热爱好者，Peter常常在国际大会上发言，还在全球范围内开展HTML5的技术培训。在加盟Kaazing前，Peter在Oracle担任了近十年的资深信息架构师，获得过两项软件专利。 Brian Albers Kaazing...
HTML5的Audio API是Web开发中的一个重要组成部分，它允许开发者在网页中集成音频播放功能，提供了丰富的交互性和自定义可能性。在这个"html5 audio demo【修复拖动进度条bug】"中，我们可以深入探讨以下几个关键知识...
作为HTML5和WebSocket的狂热爱好者，Peter常常在国际大会上发言，还在全球范围内开展HTML5的技术培训。在加盟Kaazing前，Peter在Oracle担任了近十年的资深信息架构师，获得过两项软件专利。 Brian Albers Kaazing...
作为HTML5和WebSocket的狂热爱好者，Peter常常在国际大会上发言，还在全球范围内开展HTML5的技术培训。在加盟Kaazing前，Peter在Oracle担任了近十年的资深信息架构师，获得过两项软件专利。 Brian Albers Kaazing...
作为HTML5和WebSocket的狂热爱好者，Peter常常在国际大会上发言，还在全球范围内开展HTML5的技术培训。在加盟Kaazing前，Peter在Oracle担任了近十年的资深信息架构师，获得过两项软件专利。 Brian Albers Kaazing...
作为HTML5和WebSocket的狂热爱好者，Peter常常在国际大会上发言，还在全球范围内开展HTML5的技术培训。在加盟Kaazing前，Peter在Oracle担任了近十年的资深信息架构师，获得过两项软件专利。 Brian Albers Kaazing...