HTML5视频播放插件 - 释怀我的诺亚尔_H5之家 - 中国HTML5教程资源分享第一站

首先推上神器

jPlayer : 基于HTML5/Flash的音频、视频播放器

jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto插件);

jPlayer可以让你迅速编写一个跨平台的支持音频和视频播放的网页.

jPlayer的丰富API可以让你创建一个个性化多媒体应用，因此也获得越来越多的社区成员的支持和鼓励。

官网:

英文：

1.准备

jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf （官网下载）

还有一个音频文件

2.代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>清冽叮咚短信音</title> </head> <body> <div> <div></div> <div> <div> <div> <ul> <li><a href="javascript:;" tabindex="1">play</a></li> <li><a href="javascript:;" tabindex="1">pause</a></li> <li><a href="javascript:;" tabindex="1">stop</a></li> <li><a href="javascript:;" tabindex="1" title="mute">mute</a></li> <li><a href="javascript:;" tabindex="1" title="unmute">unmute</a></li> <li><a href="javascript:;" tabindex="1" title="max volume">max volume</a></li> </ul> <div> <div> <div></div> </div> </div> <div> <div></div> </div> </div> </div> </div> </div> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.jplayer.min.js" type="text/javascript"></script> <script type="text/javascript"> function toplay(){ var playerc = $("#jquery_jplayer_1"); if (playerc.data().jPlayer && playerc.data().jPlayer.internal.ready === true) { playerc.jPlayer("setMedia", { m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //使用网络资源，自行设定音频文件 }).jPlayer("play");//jPlayer("play") 用来自动播放 }else { playerc.jPlayer({ ready: function() { $(this).jPlayer("setMedia", { m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //同上 }).jPlayer("play");//同上 }, swfPath: "include/javascript", supplied: "m4a" //acc属于M4A }); } } setInterval(function(){ toplay(); },3000);//3秒循环播放 </script> </body> </html>

附：HTML5支持的音频文件

文件格式媒体类型
MP3　　audio/mpeg
Ogg　　audio/ogg
Wav　　audio/wav

各个浏览器的支持各有有所不同