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. zookeer安装

    解压:tar xf zookeeper-3.4.9.tar.gz进入目录cd /opt/zookeeper-3.4.9/ 编辑配置文件:vim zoo.cfg# The number of milli ...

  2. Hbase 学习笔记5----hbase region, store, storefile和列簇的关系

    The HRegionServer opens the region and creates a corresponding HRegion object. When the HRegion is o ...

  3. Xamrin开发安卓笔记（三）

    http://www.cnblogs.com/minCS/p/4118170.html Xamrin开发安卓笔记(三)   安装片 Xamrin开发安卓笔记(一) Xamrin开发安卓笔记(二) 这次 ...

  4. dobbo 简单框架

  5. uva 11752 The Super Powers (数论+枚举)

    题意:找出1~2^64-1中 能写成至少两个数的幂形式的数,再按顺序输出 分析:只有幂是合数的数才是符合要求的.而幂不会超过64,预处理出64以内的合数. 因为最小的合数是4,所以枚举的上限是2的16 ...

  6. cmd 命令 记忆

    1,“开始”—>“运行”,输入cmd,回车.<或 win+R> 2,出现“命令提示符”的窗口,一般情况下是 C:\Documents and Settings\Administrat ...

  7. Linux x86架构下ACPI PNP Hardware ID的识别机制

    转:https://blog.csdn.net/morixinguan/article/details/79343578 关于Hardware ID的用途,在前面已经大致的解释了它的用途,以及它和AC ...

  8. 给JSP应用提供JSTL支持（IntelliJ IDEA）

    ===========手动分割线===2018-12-26============================================= Maven项目直接添加如下依赖即可: <de ...

  9. LVS持久化

    在实际应用场景中,轮询调度并不都是适用的.有些情况下,需要我们把同一个会话的请求都调度给一个RS节点.这时候就需要LVS提供持久化的能力,能够实现会话保持. 一.LVS的持久化主要包括以下两个方面. ...

  10. 第十节课-RNN介绍

    2017-08-21 这次的课程介绍了RNN的相关知识: 首先是RNN的几种模型: 分别又不同的应用场景,包括机器翻译,视频的分类... RNN的解释: 主要的特点就是用到了上一个隐含状态的信息,所以 ...