HTML5 audio 和 video

最新推荐文章于 2024-02-05 12:21:23 发布

原创最新推荐文章于 2024-02-05 12:21:23 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

HTML5 专栏收录该内容

11 篇文章

订阅专栏


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

浏览器对音频格式的支持：
[table]
|格式 |IE 9 |Firefox 3.5 |Opera 10.5 |Chrome 3.0 |Safari 3.0|
|Ogg Vorbis | |√ |√ |√|
|MP3 |√ | | |√ |√|
|Wav | |√ |√ | |√|
[/table]

浏览器对视频格式的支持：
[table]
|格式 |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|
[/table]