我正在开展一个项目,在这个项目中我有不同目录中的音频,视频和图片文件,并希望为这些文件编写一个简单的Web界面。到目前为止,我的一切工作都非常好,照片由灯箱显示,音频和视频由jPlayer播放。
我有一个像这样的目录结构
ARCHIVE/
_RES/
CSS/
JPLAYER/
LIGHTBOX/
index.php #this is the start page with links to the other index.php files
VIDEO/
PICTURES/
ALBUM1/
IMG/
T_IMG/
index.php
ALBUM2/
IMG
T_IMG/
index.php
ALBUMn/
IMG/
T_IMG/
index.php
AUDIO
ALBUM1
index.php
OGG/
SONG#1.ogg
SONG#n.ogg
SONG FUN. ogg
MP3/
SONG#1.mp3
SONG#n.mp3
SONG FUN.mp3
我现在的问题是,当我想要更改某些内容时,例如,在音频播放器中,我必须编辑AUDIO内每个ALBUMx /目录中的每个index.php。
我确信有一个更简单的方法:不是有很多index.php文件,只有一个index.php文件,当我点击链接时,AUDIO - > ALBUM1它自动加载一个显示音频播放器的.html文档,并用我选择的专辑中的音频文件填充播放列表。
这是我的AUDIO ALBUM index.php的示例代码。
图片和视频的相似,除了具有不同的播放器选项,例如对于视频,或者,如果是图片,则实施灯箱。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<link href="/archive/_res/style.css" rel="stylesheet" />
<?php
$parent = dirname(dirname($_SERVER['SCRIPT_NAME'])) . '/';
$dirname = basename(__DIR__);
echo '<title>'.$parent.$dirname.' </title>';
?>
<link href='http://fonts.googleapis.com/css?family=Raleway:100,400' rel='stylesheet' type='text/css'>
<!-- JPLAYER AUDIO VIDEO -->
<!--link type="text/css" href="../../_res/jplayer/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" /-->
<link type="text/css" href="../../_res/jplayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="../../_res/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="../../_res/jplayer/jplayer.playlist.min.js"></script>
<?php
$mp3folder = 'mp3/';
$oggfolder = 'ogg/';
$filetype = '*.*';
$mp3files = glob($mp3folder.'*.mp3');
$oggfiles = glob($oggfolder.'*.ogg');
echo '
<script type="text/javascript">
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [';
for ($i=0; $i<count($mp3files); $i++) {
$namerr[$i] = substr($oggfiles[$i],strlen($oggfolder),strpos($oggfiles[$i], '.')-strlen($oggfolder));
echo '{'."\n";
echo 'title:"'.$namerr[$i].'",'."\n";
echo 'mp3:"'.dirname($mp3files[$i]).'/'.rawurlencode(basename($mp3files[$i])).'",'."\n";
echo 'ogg:"'.dirname($oggfiles[$i]).'/'.rawurlencode(basename($oggfiles[$i])).'",'."\n";
echo 'free: "true"'.','."\n";
echo 'poster:"'.$mp3folder.'cover.png",'."\n";
echo '},'."\n";
}
echo '
], {
swfPath: "../../_res/jplayer",
supplied: "ogg, mp3",
wmode: "window",
size: {
width: "300px",
height: "300px",
cssClass: "jp-video-240p"
},
smoothPlayBar: true,
keyEnabled: true
});
});
</script>';
?>
<!-- JPLAYER AUDIO VIDEO //-->
<script>
function bottop (div_id) {
$('#'+div_id).animate({top:"-=140"},500, 'swing');
}
function topbot (div_id) {
$('#'+div_id).animate({top:"+=140"},500, 'swing');
}
function fade_in (div_id) {
$('#'+div_id).fadeIn(0);
}
function fade_out (div_id) {
$('#'+div_id).fadeOut(0);
}
</script>
</head>
<body>
<div id="shownav" class="shnav">
<span class="thinl4 db" onclick="topbot('topper');fade_out('shownav');">Show Navigation bar!</span>
</div>
<div id="topper">
<div id="hidenav" class="shnav">
<span class="thinl4 db" onclick="bottop('topper');fade_in('shownav');">Hide Navigation bar!</span>
</div>
<div id="backtoarchive" class="fl thinl">
<table id="keks">
<tr>
<td class="bif"><</td>
<td id="bli"><a href="#" class="blalis">Back to Archive</a></td>
</tr>
</table>
</div>
<?php include '/var/www/webaccount/html/archive/_res/nav.php'; ?>
<?php
$parent = dirname(dirname($_SERVER['SCRIPT_NAME'])) . '/';
$dirname = basename(__DIR__);
echo '<div id="where" class="fl">';
echo 'You are here: <em>'.$parent.$dirname.'</em>';
echo '</div>';
?>
</div>
<div id="jplayer-wrap">
<div id="jp_container_1" class="jp-video jp-video-270p">
<div class="jp-type-playlist">
<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>
<!-- added style below to fix floating issue (default was clear:both by css) -- not important to code function -->
<div class="jp-controls-holder" style="clear:left;">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</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="full screen">full screen</a></li>
<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-title">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</div>
</body>
</html>
我想我必须制作包含jplayer / lightbox内容和<?php include .. ?>
内容的单个“模块”并让它加载正确的文件。
所以当我点击AUDIO的链接时 - &gt; ALBUM1的html / php链接应该加载类似的东西
index.php?load=audio,files=audio/album1
如果有人对我有暗示,那就太棒了! 这是我的第一个PHP项目,我很想学习!
谢谢你, 文森特。