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

使用 jPlayer 播放音视频

编程学习2013-05-2149380

   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://www.apull.net/html/20130521153243.html

分享给朋友:

相关文章

致面向对象技术初学者的一封公开信

致面向对象技术初学者的一封公开信

 致面向对象技术初学者的一封公开信 Alistair Cockburn 著(1996 年2 月),袁峰 译介绍 首先我要解释一下为什么会写这封公开信。这似乎已经成了一种习惯,但这个步骤还是需要的。过去6 年中, 我曾经无数次地在饭店、酒吧、旅店大厅等各种地方以同一种方式度过愉快而漫长的夜晚:和同样追求真理、光明和智慧的伙伴一起探讨面向对象的真谛。现在,我已经可以回答很多当年我遇到的问题。这些同样的问题也在困扰着我的一位新同事,在一家饭店里,我花了整整一个晚上和他讨...

计算机蓝屏代码的含义

计算机蓝屏代码的含义

0 0x0000 作业完成。1 0x0001 不正确的函数。2 0x0002 系统找不到指定的档案。3 0x0003 系统找不到指定的路径。4 0x0004 系统无法开启档案。5 0x0005 拒绝存取。6 0x0006 无效的代码。7 0x0007 储存体控制区块已毁。8 0x0008 储存体空间不足,无法处理这个指令。9 0x0009 储存体控制区块地址无效。10 0x000A 环境不正确。11 0x000B 尝试加载一个格式错误的程序。12 0x000C 存取码错误。1...

ASP六大对象介绍

ASP六大对象介绍

Application对象 Application对象是个应用程序级的对象,用来在所有用户间共享信息,并可以在Web应用程序运行期间持久地保持数据。 Application的属性:  方法如下: Application对象没有内置的属性,但是我们可以自行创建其属性。 <% Application("属性名")=值 %>    其实大部分Application变量都 存放在Contents集合中,当你创建一个新的Application变量时,其实...

用vb模拟键盘

用vb模拟键盘

  键盘是我们使用计算机的一个很重要的输入设备了,即使在鼠标大行其道的今天,很多程序依然离不开键盘来操作。但是有时候,一些重复性的,很繁琐的键盘操作总会让人疲惫,于是就有了用程序来代替人们按键的方法,这样可以把很多重复性的键盘操作交给程序来模拟,省了很多精力,按键精灵就是这样的一个软件。那么我们怎样才能用VB来写一个程序,达到与按键精灵类似的功能呢?那就让我们来先了解一下windows中响应键盘事件的机制。   当用户按下键盘上的一个键时,键盘内的芯片会...

发表评论

访客

看不清,换一张

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