使用 jPlayer 播放音视频
jPlayer 是一个完全免费和开源的jQuery播放器插件,可以播放常见的视频和音频文件。基于jQuery的jPlayer可以用简单的代码实现强大的功能。
jPlayer几乎支持所有流行的浏览器,包括IE,Chrome,FireFox,Safari。也支持移动设备的浏览器,比如iOS,Android。
jPlayer支持HTML5,在HTML5下面默认使用HTML5的解码功能,支持MP3,MP4,OGG,WEBM,WAV等。在不支持HTML5的浏览器默认使用后台Flash播放音视频,支持格式有MP3,MP4,FLV。
jPlayer支持使用XHML/CSS自定义外观,支持播放列表,播放、暂停、停止、音量调节等控制功能,还能取得播放进度等信息。
例子:
在页面中添加下面代码用来显示播放器
<div id="jquery_jplayer_1"></div> <div id="jp_container_1"> <a href="#" class="jp-play">播放</a> <a href="#" class="jp-pause">暂停</a> </div>
创建jPlayer
<script type="text/javascript"> $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { m4a: "/media/mysound.mp4", oga: "/media/mysound.ogg" }); }, swfPath: "/js", supplied: "m4a, oga" }); }); </script>
页面执行后点击“播放” 开始播放,点击“暂停” 停止播放。
实现自动播放需要添加一句 .jPlayer("play")
<script type="text/javascript"> $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { m4a: "/media/mysound.mp4", oga: "/media/mysound.ogg" }).jPlayer("play"); //这句实现播放器构建完成后自动播放 }, swfPath: "/js", supplied: "m4a, oga" }); }); </script>
但播放完成后需要重复播放可以通过添加 ended 标签
<script type="text/javascript"> $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { m4a: "/media/mysound.mp4", oga: "/media/mysound.ogg" }).jPlayer("play"); //这句实现播放器构建完成后自动播放 }, ended: function() { //播放完成后要执行的函数 $(this).jPlayer("play"); //重新播放 }, swfPath: "/js", supplied: "m4a, oga" }); }); </script>
通过 jQuery的Ajax方式播放
$("play").click( function () { $.getJSON("getSound.asp", {act:"getsound",showid:showid,id:id}, function(data,textStatus,xhr){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: data.sound }); }, swfPath: "/js", supplied: "mp3, oga" }); }); });