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

使用 jPlayer 播放音视频

编程学习2013-05-2170530

   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

分享给朋友:

相关文章

年纪偏大是否适合学习计算机

年纪偏大是否适合学习计算机

★年纪偏大是否适合学习计算机  Q:我本科不是学计算机专业。但是我对计算机的兴趣很大,想明年考北京大学计算机软件的研究生!请问像我这样快30岁的人了,才开始学习计算机是不是太晚了?  A:中国很多人相信程序员是吃青春饭的。 这主要是由中国软件水平发展的现状决定的。 1、大部分都做的是行业管理方面的软件,从计算机技术上说很快就可以进入。 2、很多公司没有管理和技术双重的提升机制,使得人们觉得做管理比做技术有前途,但是仍...

 C++中指针的使用艺术

C++中指针的使用艺术

C++中指针的使用艺术 在C++编程中使用指针能有速度快,节约内存等优点,是很多C++程序员的最爱。但指针是一把双刃剑,用好了它,你就会发现指针有多么的方便,反之,你可能就头疼了,往往会出现意想不到的问题。   一.什么是指针:   其实指针就像是其它变量一样,所不同的是一般的变量包含的是实际的真实的数据,而指针只是一个指示器,它告诉程序在内存的哪块区域可以找到数据。   这是一个非常重要的概念,有很多程序和算法都是围绕指针设计的,如链...

VB.NET中如何扩充字符串进行固定宽度显示

VB.NET中如何扩充字符串进行固定宽度显示

  在VB.NET中,当你需要在控制台显示数据或准备好打印数据时,可能需要调整列宽以显示固定长度的数据。本文介绍了使用String对象的PadLeft方法和PadRight方法扩充字符串以进行固定宽度显示。PadLeft和PadRight方法      PadLeft和PadRight是字符串类的两个方法,可以分别使用它们在字符串的左边和右边填充空格。这两个方法多接受一个代表总长度的整型数,添加的空格数等于填充总长度减去字符串的当前长...

VB.NET 用ShellExecuteEx 打开系统文件属性对话框 模块

VB.NET 用ShellExecuteEx 打开系统文件属性对话框 模块

' ' VB.NET 调用系统文件属性对话框模块 ' ' by: Apull ' QQ:374237545 ' http://www.apull.net ' 2007-6-9 ' ' Imports System.Runtime.InteropServices     Mod...

发表评论

访客

看不清,换一张

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