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. C语言自带快速排序对比插入排序

    #include <stdio.h> #include <stdlib.h> #include <time.h> void getRandomArr (int ar ...

  2. URAL - 1900 Brainwashing Device

    While some people travel in space from planet to planet and discover new worlds, the others who live ...

  3. REST API风格

    REST API风格 就是用URL定位资源,用HTTP描述操作. 看Url就知道要什么看http method就知道干什么看http status code就知道结果如何   主要是针对资源进行资源定 ...

  4. VRChat简易教程2-创建一个最基本的世界（world）

    一.准备工作 1 先确保你安装了unity并导入了sdk 教程:https://www.cnblogs.com/cation/p/10311702.html 2 按之前的教程新建一个project并导 ...

  5. 非阻塞套接字与IO多路复用

    我们了解了socket之后已经知道,普通套接字实现的服务端的缺陷:一次只能服务一个客户端! 并且,为了使一个客户端能够不断收发消息,我们还要使用while循环来轮询,这极大地降低了我们的效率 acce ...

  6. Spring Boot 中修改端口和上下文路径

    通过修改application.properties内容来改变访问的端口号和上下文路径(很简单!) spring.mvc.view.prefix=/WEB-INF/jsp/ spring.mvc.vi ...

  7. Spring中Value注解的使用

    Spring中Value注解的使用 分类: Spring2014-08-16 17:28 2985人阅读 评论(0) 收藏 举报 有的时候我们定义了Properties文件,并且使用Spring的Pr ...

  8. Dynamo论文介绍

    http://catkang.github.io/2016/05/27/dynamo.html Dynamo是Amazon开发的分布式存储系统,本文是阅读Dynamo论文后的总结:Dynamo: Am ...

  9. Java 自定义注解实现ORM对象关系映射

    一,ORM概念 ORM即Object Relation Mapping,Object就是对象,Relation就是关系数据库,Mapping映射,就是说Java中的对象和关系数据库中的表存在一种对应关 ...

  10. 发现project项目打红色感叹号的一种解决方案

    在window-preferences中的xml catalog中对打叉的dtd进行remove. 很有可能是包导错了,打开config build path然后将打红叉的文件进行remove.