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. Mongo 查询

    Mongo 查询   mongo js 遍历 db.getCollection('CPU').find({}).limit(100).sort({"time":-1}).forEa ...

  2. nginx常用

    1.rewrite return 301 http://example.com$request_uri; rewrite ^ http://example.com permanent; 2.try_f ...

  3. HTML 2 （Day49）

    一.table标签 http://www.cnblogs.com/shaojiafeng/p/7516741.html 二.form 表单属性 action:表单提交到哪.一般指向服务端一个程序,程序 ...

  4. Apache和Nigix

    Apache   ,   Nginx    是开源的HTTP服务器软件 HTTP服务器本质上也是一种应用程序--它通常运行在服务器之上,绑定服务器的IP地址并监听某一个tcp端口来接收并处理HTTP请 ...

  5. Notepad++ c编译环境 64

    准备: mingw64(我是从西西软件园下的) 个人微盘共享地址: http://url.cn/24RAhTf notepad++ 安装 mingw64 系统path路径(bin目录下) Notepa ...

  6. List集合的ForEach扩展

           public static void ForEach<T>(this IEnumerable<T> enumerableSource, Action<T&g ...

  7. Java应用程序连接数据库--JDBC基础

    Java应用程序连接数据库--JDBC基础   Java应用程序连接数据库–JDBC基础 <!-- MySQL驱动,连接数据库用,由数据库厂商提供 --> <dependency&g ...

  8. akka框架地址

    http://doc.akka.io/docs/akka/2.2.3/AkkaJava.pdf

  9. 对Java 注解的一些理解

    转载自https://blog.csdn.net/javazejian/article/details/71860633 引入 注解最简单的使用方式 Java注解与普通修饰符(public\stati ...

  10. ros使用时的注意事项&技巧

    1.rosrun package-name executable-name 比如 rosrun turtlesim turtlesim_node 2.一旦启动roscore后,便可以运行ROS程序了. ...