上一篇插件搭建的顺序最后一步的页面初始化函数中,就是最重要的一步,就先从这个函数说起吧。

$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Bubble",
mp3: "@Scripts.Url("~/content/test.mp3")"
//mp3:"D:\Documents\Music\test.mp3"
});
},
swfPath: "/Scripts/JPlayer",
supplied: "mp3"
});

第一行代码$("#jquery_jplayer_1").jPlayer()这个方法,将jquery_jplayer_1这个div初始化成播放器,然后括号里的ready、swfPath、Supplied都是这个播放器的参数,即Json格式的options,一个个来解释

swfPath:当浏览器不支持Html5时,使用Flash来显示播放器,这个参数就是指的源文件中jplayer.swf的路径,也可以这样写:swfPath:"/Scripts/Jplayer/jplayer.swf"

supplied:当前播放器支持的格式

最后,当这些参数设置好了以后,就该调用ready函数了,里面的$(this)还是指刚刚那个播放器,$(this).jPlayer("setMedia")设定要播放的文件,方法里面的同样是json格式的参数,如title:标题,MP3:"文件路径"。

然后我的项目里需要用到动态来播放,也就是点击不同按钮播放不同的文件,可以像下面这么使用:

比如一个button按钮的click事件中可以加入下列代码:

$("#jquery_jplayer_1")
.jPlayer("stop")
.jPlayer("setMedia", {wav:"@Url.Action("GetRecordAudio")/?path='sdf'" }) .jPlayer("play");

文件的url我做了一下处理,因为要访问项目外其他的文件,所以在后台action中返回了一个FileStreamResult的类型,顺便贴出来:

//返回服务器文件
public FileStreamResult GetRecordAudio(string path)
{
FileStream file = new FileStream(@"D:\Documents\Music\test.wav",FileMode.Open);
return File(file, "application/octet-stream");
}

path可以自己处理,这样我就完成了一个动态播放音乐的功能。

附上jplayer官方API地址:http://www.jplayer.org/latest/developer-guide/

在网上看到有朋友说播放器无法隐藏,在官网上找到了解决办法(好像使用html5的时候才支持隐藏):

    <head>
<style>
#jquery_jplayer {
display:none; /* 当使用flash显示的时候无效 */
}
</style>
<script type="text/javascript">
$("#jquery_jplayer").hide(); /*当使用flash显示的时候无效 */
</script>
</head> <body>
<div id="jquery_jplayer"></div>
</body>

JPlayer使用之二,主要函数介绍的更多相关文章

  1. linux shell学习笔记二---自定义函数(定义、返回值、变量作用域)介绍

    linux shell 可以用户定义函数,然后在shell脚本中可以随便调用.下面说说它的定义方法,以及调用需要注意那些事项. 一.定义shell函数(define function) 语法: [ f ...

  2. Python开发【第三章】:Python函数介绍

    一. 函数介绍 1.函数是什么? 在学习函数之前,一直遵循面向过程编程,即根据业务逻辑从上到下实现功能,其往往用一长段代码来实现指定功能,开发过程中最常见的操作就是粘贴复制,也就是将之前实现的代码块复 ...

  3. python中multiprocessing.pool函数介绍_正在拉磨_新浪博客

    python中multiprocessing.pool函数介绍_正在拉磨_新浪博客     python中multiprocessing.pool函数介绍    (2010-06-10 03:46:5 ...

  4. Kylin系列之二:原理介绍

    Kylin系列之二:原理介绍 2018年4月15日 15:52 因何而生 Kylin和hive的区别 1. hive主要是离线分析平台,适用于已经有成熟的报表体系,每天只要定时运行即可. 2. Kyl ...

  5. MySQL常用函数介绍

    MySQL常用函数介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.操作符介绍 1>.操作符优先级 mysql; +----------+ | +----------+ ...

  6. 函数和常用模块【day04】:函数介绍(一)

    本节内容 1.函数介绍 2.函数定义 3.为什么要使用函数 一.介绍 在我们以往的学习编程的过程当中,碰到的最多的两张编程方式或者说编程方法:面向过程和面向对象.其实不管是哪一种,其实都是编程的方法论 ...

  7. {python之协程}一 引子 二 协程介绍 三 Greenlet 四 Gevent介绍 五 Gevent之同步与异步 六 Gevent之应用举例一 七 Gevent之应用举例二

    python之协程 阅读目录 一 引子 二 协程介绍 三 Greenlet 四 Gevent介绍 五 Gevent之同步与异步 六 Gevent之应用举例一 七 Gevent之应用举例二 一 引子 本 ...

  8. 第16课-数据库开发及ado.net-数据库SQl,创建数据库和表,增删改语句,约束,top和Distinct,聚合函数介绍

    第16课-数据库开发及ado.net 数据库SQl,创建数据库和表,增删改语句,约束,top和Distinct,聚合函数介绍 SQL语句入门(脚本.命令) SQL全名是结构化查询语言(Structur ...

  9. python基础3之文件操作、字符编码解码、函数介绍

    内容概要: 一.文件操作 二.字符编码解码 三.函数介绍 一.文件操作 文件操作流程: 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 基本操作: #/usr/bin/env ...

  10. Python的常用内置函数介绍

    Python的常用内置函数介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.取绝对值(abs) #!/usr/bin/env python #_*_coding:utf-8_ ...

随机推荐

  1. igraph Tutorial

      igraph Tutorial¶   参考http://www.cs.rhul.ac.uk/home/tamas/development/igraph/tutorial/tutorial.html ...

  2. Ubuntu12.04 安装adb

    1.通过apt-get安装adb sudo add-apt-repository ppa:nilarimogard/webupd8 sudo apt-get update sudo apt-get i ...

  3. ubuntu 12.04网络设置

    1.服务器版本 设置IP地址 ubuntu 12.04的网络设置文件是/etc/network/interfaces,打开文件,会看到 auto lo iface lo inet loopback 这 ...

  4. Swift进阶之路(一)——单例模式、属性传值、代理传值、闭包传值

    一.单例模式 单例模式是设计模式中最简单的一种,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象. 关于单例,有三个重要的准则需要牢 ...

  5. String中的equals方法解析 jdk1.7

    注  此篇为jdk1.7中的源码解析 equals()方法中的判断分一下步骤 1先判断内存地址是否相同  如果内存地址相同 那么字符串就是相同的 返回true 2 判断当前字符串和参数字是否属于同一类 ...

  6. Nodejs Q promise设计思路

    Nodejs Q promise库 前言 Q库为nodejs提供了一个基于promise的编程方式,从此避免了一层又一层的callback调用.不过Q的灵活性也给我造成了很大困扰,我可以用promis ...

  7. Linux基础知识点

    1.目录结构 bin 存放二进制可执行文件(ls,cat,mkdir等) boot 存放用于系统引导时使用的各种文件 dev 用于存放设备文件 etc 存放系统配置文件 home 存放所有用户文件的根 ...

  8. Jenkins Pipeline shell脚本用svn_revision当做系统版本号

    1. 使用dir命令,进入发布目录,版本号所在文件夹. 2. 使用sed命令 修改替换版本号,这里使用vvvv作为要替换的版本号. 3. 最后一步可以不加.只是方便查看效果. stage(" ...

  9. 在Extjs 的 TabPanel在 title标题栏上加按扭button

    如何在tabPanel的 标题栏的右侧添加操作按扭,效果如图,我总结了两种实现的方案: 第一种方案: 使用tabPanel的tabPbar: Ext.define("CisApp.view. ...

  10. C#之多线程

    多线程在C#中使用得非常频繁,线程之间的充分利用显得尤为重要,一般的写法都是得不到充分利用资源,本人针对多线程写了一种方法,可以充分利用资源,保证每次同时启动10条线程,现在执行完马上再启动一条,总之 ...