`

HTML5 audio 和 video

 
阅读更多
<!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
分享到:
评论

相关推荐

    Safari HTML5 Audio and Video Guide

    If you embed audio or video in your website, you should use HTML5.

    让audio和video标签在任何浏览器中都兼容html5media.min.js

    HTML5新增加的audio和video标签让我们增加了很多惊喜,可以让我们更方便的在网页中播放音频和视频。但目前很多浏览器不支持,无法在旧版的IE浏览器中使用。html5media.min.js却是一个能让这两个标签在各种新旧版IE...

    浏览器HTML5标签video和audio支持

    浏览器HTML5标签video和audio支持 包含其相应支持的格式

    HTML5 AudioVideo 标签,属性,方法,事件

    HTML5 AudioVideo 标签,属性,方法,事件

    完整版《HTML5高级程序设计》5

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    HTML5高级程序设计

    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高级程序设计》2

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    完整版《HTML5高级程序设计》4

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    jPlayer-HTML5 Audio & Video for jQuery

    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程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    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高级程序设计.part5

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    完整版《HTML5高级程序设计》3

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    HTML5高级程序设计.part4

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    HTML5高级程序设计.part1

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    HTML5高级程序设计.part2

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    HTML5高级程序设计.part3

    作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。  Brian Albers Kaazing...

    html5video标签用法

    简单的html5 audio和video标签的用法,还不错哦,供小白参考

    html5入门代码大全(源码)audio、video、canvas 、communication、forms、geolocation

    html5入门代码大全(源码) 包含audio、video、canvas 、communication、forms、geolocation、intro、offline、storage、websocket、workers

    audio_video_marquee_05.html

    audio_video_marquee_05.html

    CKEditor 添加Video插件(MP4,MP3)并且兼容HTML5 Video插件

    CKEditor 添加Video插件(MP4)并且兼容HTML5 Video插件 1:把video文件复制到ckeditor/plugins/下面 2:ckeditor/config.js 中添加如下: a:在toolbar中['Image','Flash','Video'],配置加入“Video” 项。 b:配置 ...

Global site tag (gtag.js) - Google Analytics