效果展示

jPlayer简介

简单的说jPlayer是个用JavaScript写的完全免费和开源的媒体库

可以在网页上实现播放音乐和视频
jplayer支持格式ogg (Vorbis/Theora)，可以用ffmpeg2theora转换

操作步骤

下载jPlayer最新版，下载皮肤 http://www.jplayer.org/download/

在网站根目录创建两个文件夹/js 和 /skin
把jPlayer解压到js/ ，把皮肤解压到 skin/
可以在css文件调整字体，参照以下代码：
div.jp-audio,
div.jp-video {
  /* Edit the font-size to counteract inherited font sizing.
   * Eg. 1.25em = 1 / 0.8em
   */
  font-size:1.25em;
}

创建音乐播放器、或视频播放器：在网页添加以下代码
变更的目录上传到网站服务器



代码部分
音乐播放器代码

<!-------- jPlayer音乐播放器-------- head部分-----------初始化 -->
<link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){$("#jquery_jplayer_1").jPlayer({
ready: function () {$(this).jPlayer("setMedia", {oga: "http://vorbis.sailormusic.net/sm/songbox/COCC-14459/08.ogg"}).jPlayer("play"); },
swfPath: "/js",supplied: "mp3,m4a, oga"});});
</script>




<!-------- jPlayer音乐播放器-------- body部分-----------接口样式 -->
<center>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">

<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">播放</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">暂停</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">停止</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="静音">静音</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="取消静音">取消静音</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="最大音量">最大音量</a></li>
</ul>

<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>

<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="重复播放">重复播放</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="取消重复">取消重复</a></li>
</ul>
</div>

</div><div class="jp-title"><ul><li>美少女战士</li></ul></div>

<div class="jp-no-solution">
<span>Update Required</span>
无法播放！建议升级浏览器，或者升级该死的<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash插件</a>.
</div>

</div>
</div>
</center>


视屏播放器代码

<!-------- jPlayer视屏播放器-------- head部分-----------初始化 -->
<center>
<link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
}).jPlayer("play");
},
swfPath: "/js",
supplied: "m4v, ogv"
});
});
</script>

<!-------- jPlayer视屏播放器-------- body部分-----------接口样式 -->
<center>
<div id="jp_container_1" class="jp-video ">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play"><a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a></div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class="jp-controls-holder">

<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">播放</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">暂停</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">停止</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="静音">静音</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="取消静音">取消静音</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="最大音量">最大音量</a></li>
</ul>

<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="全屏">全屏</a></li>
<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="窗口">窗口</a></li>
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="重复播放">重复播放</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="取消重复">取消重复</a></li>
</ul>
</div>

<div class="jp-title"><ul><li>大象之梦</li></ul></div>

</div>
</div>

<div class="jp-no-solution">
<span>Update Required</span>
无法播放！建议升级浏览器，或者升级该死的<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash插件</a>.
</div>

</div>
</div>
</center>



		
Linux学习笔记 ♥ youzhiyili