本篇简要介绍一下h5中新增audio和video的使用方法,h4的播放是通过flash完成的。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>audio和video的实例演示</title>
</head>
<body>
<h1>audio元素示例</h1>
<audio controls="controls" src="01%20静安寺.mp3">
您的浏览器太老了,不支持我们的HTML5页面,请更新浏览器!
</audio>
<br/>
<h1>video元素示例</h1>
<video controls="controls" width="1450" height="460" src="上海理工大学宣传片《在路上》.mp4"></video>
</body>
</html>
还有一些属性,如:
autoplay属性(是否自动播放)、preload属性(预加载或缓冲)、poster属性(video独有)、
loop属性、error属性,如
<video id="video" src="video123.mp4"></video>
<script type="text/javascript">
var video = document.getElementById('video');
video.addEventListener("error",function(){
var error = video.error;
switch (error.code){
case 1:
alert('取回过程被用户中止。');
break;
case 2:
alert('当下载时发生错误。');
break;
case 3:
alert('当解码时发生错误。');
break;
case 4:
alert('媒体不可用或者不支持音频/视频。');
break;
}
},false);
</script>
播放效果图: