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

使用 jPlayer 播放音视频

编程学习2013-05-2192300

   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语言还会教给你更多的关于计算机的知识。它能给我们提供的裨益,简单列举如下:   1)相比较其他的编程语言(像C++,JAVA),C语言是个低级语言。从总体上来说,低级的编程语言可以让你更好的了解计算机。   2)设备驱动程序和操作系统只能用C语言来编写。现在,你...

[转] 深入探讨C++中的引用

[转] 深入探讨C++中的引用

  摘要:介绍C++引用的基本概念,通过详细的应用分析与说明,对引用进行全面、透彻地阐述。  关键词:引用,const,多态,指针  引用是C++引入的新语言特性,是C++常用的一个重要内容之一,正确、灵活地使用引用,可以使程序简洁、高效。我在工作中发现,许多人使用它仅仅是想当然,在某些微妙的场合,很容易出错,究其原由,大多因为没有搞清本源。故在本篇中我将对引用进行详细讨论,希望对大家更好地理解和使用引用起到抛砖引玉的作用。  引用简介  引用就是某一变量(目标)的一个别名,...

[转].NET实现中英文验证码

[转].NET实现中英文验证码

最终效果如图:  CheckCode.aspx.cs代码如下protected void Page_Load(object sender, EventArgs e) { //获取GB2312编码页(表) /**//** * 生成中文验证验码所要使用的方法 * 注,生成中文验证码时要改变一下生成验证码图片的宽度 * var imageCode = new System.Drawing.Bitmap((int)Math....

SetTimer(), KillTimer() 使用

SetTimer(), KillTimer() 使用

SetTimer函数的用法  1 )用WM_TIMER来设置定时器  先请看SetTimer这个API函数的原型  UINT_PTR SetTimer(   HWND hWnd, // 窗口句柄   UINT_PTR nIDEvent, // 定时器ID,多个定时器时,可以通过该ID判断是哪个定时器   UINT uElapse, // 时间间隔,单位为毫秒   TIMERPROC lpTimerFunc // 回调函数   );例如  SetTimer...