您的位置：首页 > Web前端 > HTML5

HTML5视频播放插件

2017-07-07 10:08 260 查看

首先推上神器

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

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

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

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

官网:www.jplayer.cn

英文：www.jplayer.org

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 id="play-box">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航