vpplayer音乐播放器插件

2019-10-09 09:05 发布

代码|

admin
00
admin
湖南省 长沙市
在最美的年纪遇见最美的自己

ed4af23145.jpg


基于jquery和bootstrap的音乐播放器插件。vpplayer音乐播放器小巧灵活,通过简单的配置即可在页面中生成漂亮的音乐播放器界面。


基本结构

在页面中引入必要的js和css文件。

<html>
<head>
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<script type="text/javascript" src="./lib/vpplayer.js"></script>
<link rel="stylesheet" type="text/css" href="./css/vpplayer.css">
</head>
<script>
/**
  * vpplayer script
  *
  */
</script>
<body>
<div id="player">
</div>
</body>


vpplayer script The basic vpplayer script
src attribute

$(document).ready(function(){
$("#player").vpplayer({
    src: "./audio/audio.mp3"
});
});

这个SRC属性是处理音频文件的url。在上述代码中,“./audio/audio.mp3路径是音频文件路径。


类型属性(指音频文件的类型)

$(document).ready(function(){
$("#player").vpplayer({
    src: "./audio/audio.mp3",
    type: "audio/mp3"
});
});


trackName attribute(这个TrackName属性在播放器屏幕中显示音频名称。

$(document).ready(function(){
$("#player").vpplayer({
    src: "./audio/audio.mp3"
    type: "audio/mp3",
    trackName: "sample audio",
});
});


preloadMessage attribute(这个预加载消息属性用于显示消息,例如加载。在将音频文件加载到播放之前。

$(document).ready(function(){
$("#player").vpplayer({
    src: "./audio/audio.mp3"
    type: "audio/mp3",
    trackName: "sample audio",
    preloadMessage: "LOADING..........."
});
});


view attribute(这个视点属性指定播放机的视图模式。

$(document).ready(function(){
$("#player").vpplayer({
    src: "./audio/audio.mp3"
    type: "audio/mp3",
    trackName: "sample audio",
    preloadMessage: "LOADING...........",
    view: "basic"
});
});

vpPlayer支持两种视图模式。

view: "basic"

view: "minimal"


playerColor attribute(这个playerColor属性用于为播放器皮肤定义自定义颜色。

$(document).ready(function(){
$("#player").vpplayer({
    src: "./audio/audio.mp3"
    type: "audio/mp3",
    trackName: "sample audio",
    preloadMessage: "LOADING...........",
    view: "basic",
    playerColor: "black"
});
});

VpPlayer支持单色和双色的皮肤

单色模式

displayColor: "green"


双色模式

displayColor: "green, blue"



https://github.com/rvprasath/vpplayer

授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

猜你喜欢
牛七七
更多发现
子导航代码