当前位置:首页 > 编程学习 > 使用 jPlayer 播放音视频

使用 jPlayer 播放音视频

编程学习2013-05-2181950

   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"
        });
    });
});

http://www.apull.net/html/20130521153243.html

扫描二维码推送至手机访问。

版权声明:本文由海阔天空发布,如需转载请注明出处。

本文链接:https://apull.net/html/20130521153243.html

分享给朋友:

相关文章

怎样学习C语言

怎样学习C语言

怎样学习C语言很多人对学习C语言感到无从下手,经常问我同一个问题:究竟怎样学习C语言?我是一个教师,已经开发了很多年的程序,和很多刚刚起步的人一样,学习的第一个计算机语言就是C语言。经过这些年的开发,我深深的体会到C语言对于一个程序设计人员多么的重要,如果不懂C语言,你想写底层程序这几乎听起来很可笑,不懂C语言,你想写出优秀高效的程序,这简直就是天方夜谭。为什么C语言如此重要呢?第一:C语言语法结构很简洁精妙,写出的程序也很高效,很便于描述算法,大多数的程序员愿意使用C语言去...

VB.NET中快速访问注册表技巧

VB.NET中快速访问注册表技巧

vb.net中访问注册表变得非常的简单。我们可以用 microsoft.Win32 名称空间的 下的 registry 类 和  registryKey 类。 另外 My.Computer.Registry 也可以返回一个 Microsoft.Win32.Registry 类的实例。 下面就举几个小例子来说明vb.net访问注册表的方法。1,返回或创建一个注册表键Dim Key1 As Microsoft.Win32.RegistryKey Key1 = My.Compu...

关于学习编程和C语言

关于学习编程和C语言

关于学习编程和C语言  转自 开复网 Q:该怎么学习编程?  A:首先问你一个问题:你们在学校都学些什么课程? 问这个问题的原因是,我认为学校的计算机科学基础课很重要。如果你所在学校的课程设置合理,那你应该先把主要精力花在这些基础课上。很多学生看到基础理论就茫然,不知道这些图表,符号,甚至硬件的知识对将来的软件开发有什么用。用处大得很哪。比如,操作系统课里讲到的多线程的东西在系统编程里很有用。又比如,尽管你将来不会去涉及电脑的...

代码迷惑技术如何保护Java免遭逆向工程

代码迷惑技术如何保护Java免遭逆向工程

很少有问题比程序员遇到不访问无法利用的源代码就无法解决的漏洞更令人沮丧的了。你是否在通过一个在线开源库修补代码,或正在调用常用操作系统例行程序;你可能每周都要花时间处理不是由你编写,因而也无法访问其源代码的代码。因为Java字节码包含许多和原始代码相同的信息,所以很容易对Java类文件执行逆向工程。另外,Java程度以其“一旦编写,随处运行”特性而闻名。虽然并非Java语言的专利,但代码反编译从未在Java开发者之中得到如此公开或普遍地利用。反编译的对...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。