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. LeetCode：课程表【207】

    LeetCode:课程表[207] 题目描述 现在你总共有 n 门课需要选,记为 0 到 n-1. 在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一个匹 ...

  2. vscode 编写c++

    参考了 配置文件之前的操作:https://www.cnblogs.com/lianshuiwuyi/p/8094388.html 配置文件具体内容:https://blog.csdn.net/qq5 ...

  3. HDOJ 1423 Greatest Common Increasing Subsequence 【DP】【最长公共上升子序列】

    HDOJ 1423 Greatest Common Increasing Subsequence [DP][最长公共上升子序列] Time Limit: 2000/1000 MS (Java/Othe ...

  4. CreateWindow创建无边框 可拉伸窗体

    createwindow 定义 HWND WINAPI CreateWindow( _In_opt_ LPCTSTR lpClassName, _In_opt_ LPCTSTR lpWindowNam ...

  5. Linux系统下使用pwgen生成密码的使用教程

    pwgen生成的密码易于记忆且相当安全.从技术上来说,容易记忆的密码不会比随机生成的密码更加安全.但是,在大多数情况下,pwgen生成的密码已经足够安全,除了网银密码等需要高安全等级的情况外.使用易于 ...

  6. jsp select multiple

    //File: index.html<HTML>    <HEAD>        <TITLE>Submitting Multiple Selection Sel ...

  7. CNNIC成为首家UASG中国联络站

    1月29日,在“2018中国域名大会暨中国互联网络信息中心(CNNIC)行业合作伙伴年会”上获悉,CNNIC日前正式完成与互联网名称与数字地址分配机构(ICANN)的签约,成为首家UASG(普遍接受指 ...

  8. ViewPager实现图片的轮播

    在app中图片的轮播显示可以说是非常常见的实现效果了,其实现原理不过是利用ViewPager,然后利用handler每隔一定的时间将ViewPager的currentItem设置为当前item的pos ...

  9. Pandas分组（GroupBy）

    任何分组(groupby)操作都涉及原始对象的以下操作之一.它们是 - 分割对象 应用一个函数 结合的结果 在许多情况下,我们将数据分成多个集合,并在每个子集上应用一些函数.在应用函数中,可以执行以下 ...

  10. NumPy IO文件操作

    NumPy - IO ndarray对象可以保存到磁盘文件并从磁盘文件加载. 可用的 IO 功能有: load()和save()函数处理 numPy 二进制文件(带npy扩展名) loadtxt()和 ...