jplay一个播放器的工具包，依赖于jquery或者zepto，有zepto所以相当于是PC和移动都支持。

它的官方文档为：http://www.jplayer.cn/

同时也推出的react的支持包，具体参考：https://github.com/jplayer/react-jPlaylist

所以还是蛮好用的一个工具

以下是自己要使用时，写的个小demo，自己留存以便以后参考

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="description" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <script type="text/javascript" src='http://www.jplayer.cn/demos/lib/jquery.min.js'></script>

        <script type="text/javascript" src='http://www.jplayer.cn/demos/dist/jplayer/jquery.jplayer.min.js'></script>

    </head>

    <body>

        <div id="test"></div>

        <div>

            <button id="play">play</button>

            <button id="pause">pause</button>

            <button id="next">next</button>

            <button id="goEnd">goEnd</button>

            <p id="progress">0</p>

        </div>

        <script>

            var musicUrl = "http://ws.stream.qqmusic.qq.com/108709929.m4a?fromtag=46";

            var nextMusicUrl = "http://ws.stream.qqmusic.qq.com/108029927.m4a?fromtag=46";

            $("#test").jPlayer({            //配置音乐源文件，并自动播放

                ready: function() {

                    $(this).jPlayer("setMedia", {

                        mp3: musicUrl

                    }).jPlayer("play");

                } ,

                ended: function() {             //当前音乐结束后触发事件

                    console.log("play end");

                    $(this).jPlayer("setMedia", {

                        mp3: nextMusicUrl

                    }).jPlayer("play");

                } ,

                timeupdate : function(e){        //播放时间更新事件

                    $("#progress").text(parseInt(e.jPlayer.status.currentTime));

                }

            })

            $("#pause").bind("click" , function(){        //暂停

                $("#test").jPlayer("pause");

            });

            $("#play").bind("click" , function(){        //播放

                $("#test").jPlayer("play");

            });

            $("#next").bind("click" , function(){        //下一首

                $("#test").jPlayer("setMedia", {

                            mp3: nextMusicUrl

                        }).jPlayer("play");

            });

            $("#play").bind("click" , function(){        //播放

                $("#test").jPlayer("play");

            });

            $("#goEnd").bind("click" , function(){        //跳转到95%的位置播放

                $("#test").jPlayer("playHead", 95);

            });

        </script>

    </body>

</html>

就这样啦！！！

记录下jplayer的简单demo的更多相关文章

  1. JavaWeb开发：从购买服务器到简单demo运行

    写这篇文章的目的: 一个是为了记录实施过程,方便自己日后查阅: 另一个是给项目组成员提供一个参考,方便他们以后搭建自己的项目环境: 当然若能帮助到更多的朋友,那就再好不过了:D 需要注意: 我本身也是 ...

  2. Spring的简单demo

    ---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...

  3. Managed DirectX中的DirectShow应用（简单Demo及源码)

    阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...

  4. angular实现了一个简单demo，angular-weibo-favorites

    前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...

  5. Solr配置与简单Demo[转]

    Solr配置与简单Demo 简介: solr是基于Lucene Java搜索库的企业级全文搜索引擎,目前是apache的一个项目.它的官方网址在http://lucene.apache.org/sol ...

  6. android JNI 简单demo（2）它JNI demo 写

    android JNI 简单demo(2)它JNI demo 写 一.搭建Cygwin 环境:http://blog.csdn.net/androidolblog/article/details/25 ...

  7. 记录下Webapi签名机制

    首先,写这篇文章的原因是因为最近某一个项目中的接口被人为调用了,导致了数据库数据被串改.虽然是内部人无意点的,但还是引起了我的担忧,所有整理了下关于Webapi的相关签名机制. 一.我们在开发接口时, ...

  8. 服务网关Ocelot 入门Demo系列（01-Ocelot极简单Demo及负载均衡的配置）

    [前言] Ocelot是一个用.NET Core实现并且开源的API网关,它功能强大,包括了:路由.请求聚合.服务发现.认证.鉴权.限流熔断.并内置了负载均衡器与Service Fabric.Butt ...

  9. Linux系统下MongoDB的简单安装与基本操作

    这篇文章主要介绍了Linux系统下MongoDB的简单安装与基本操作,需要的朋友可以参考下   Mongo DB ,是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式,备 ...

随机推荐

  1. django【原生分页】

    1.urls.py url(r'^page2/',views.page2), 2.views.py from django.core.paginator import Paginator,PageNo ...

  2. Python（函数的参数）

    函数参数的使用 def foo(x,y): pass foo(1,2) 形参:就是变量名 实参:就是变量值 形参:位置形参,默认参数,*args,命名关键字参数,**kwargs 实参: 按位置传值的 ...

  3. display:inline-block; 去除间隙的方法 总结：

    个人常用: 如: <ul> <li><a href="#" >实时数据</a></li> <li><a ...

  4. C++中的config设计

    配置文件读写类,它要有以下这些方法: 1. 支持读入一个指定配置文件的能力 2. 支持随时加入一个配置项的能力 3. 足够强大,能够写入各种数据结构的配置信息 C++ 里,我们要存储这样的数据就使用 ...

  5. Web开发相关笔记 #01#

    前端学习纲要 ※jQuery 参考 ※ 整理 Chrome 收藏夹的小技巧 ※ 解决 AJAX 跨域获取 cookie ※ 记一次 MyBatis 相关的 debug [1] 前端学习纲要: ♦ 第一 ...

  6. Django内置Admin解析

    Django 内置的admin是对于model中对应的数据表进行增删改查提供的组建 一.Django admin的内部依赖: 依赖的app django.contrib.auth django.con ...

  7. spring boot应用测试框架介绍

    一.spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit.spring test.assertj.hamcres ...

  8. 20145219 《Java程序设计》第04周学习总结

    20145219 <Java程序设计>第04周学习总结 教材学习内容总结 继承 继承就是避免多个类间重复定义共同行为. 面向对象中,子类继承父类,就是把程序中相同的代码部分提升为父类. R ...

  9. shell 中的 eval 及 crontab 命令

    eval eval会对后面的命令进行两遍扫描,如果第一遍扫描后,命令是个普通命令,则执行此命令:如果命令中含有变量的间接引用,则保证间接引用的语义.也就是说,eval命令将会首先扫描命令行进行所有的置 ...

  10. Largest Rectangle in Histogram, 求矩形图中最大的长方形面积

    问题描述: Given n non-negative integers representing the histogram's bar height where the width of each ...