0
我正在構建一個網站，使用插件創建一個圖庫查看視頻源。在生成圖庫視圖的PHP文件中，我添加了一個播放按鈕以顯示在視頻縮略圖的頂部。當按鈕正確顯示時，插件會將視頻鏈接直接應用到縮略圖圖像，因此如果用戶直接點擊按鈕，則不會打開視頻模式。將鏈接添加到播放按鈕添加到媒體庫插件
<div class="media-thumb videoPreviewBox">
<div class="videoPreview">
</a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/>
<img class="playButtonHover" src="<?php echo $this->getThemePath()?>/images/playButtonHover.png">
<img class="playButton" src="<?php echo $this->getThemePath()?>/images/playButton.png">
</div>
</div>
雖然我不確定爲什麼有一個結束標記放置在哪裏，該插件似乎工作正常。我認爲問題在於href =「＃popup_prep」應用於圖像。我嘗試將縮略圖圖像和播放按鈕狀態放在< a href =「＃popup_prep」>（空間添加到顯示標籤的帖子中），無論有沒有應用於圖像的href。
我很難過，不想把事情搞砸。希望這裏的PHP人員能指出我做錯了什麼。非常感謝！
這篇文章的其餘部分是我，包括盡職調查信息，因爲我不知道有多少和什麼情況下是必要的。首先將CSS應用於這些元素，然後是完整的PHP文件以用於圖庫視圖。
div.videoPreviewBox {
float: left;
display: inline-block;
width: 21%;
margin: 2%;
margin-top: 0%;
}
@media only screen and (max-width: 594px) {
div.videoPreviewBox {
width: 46%;
}
}
@media only screen and (max-width: 300px) {
div.videoPreviewBox {
width: 96%;
}
}
div.videoPreview {
position: relative;
}
img.videoPreviewImg {
width: 100%;
z-index: 1;
}
img.playButtonHover, img.playButton {
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px;
-webkit-transition: opacity .7s ease-in-out;
-moz-transition: opacity .7s ease-in-out;
-o-transition: opacity .7s ease-in-out;
transition: opacity .7s ease-in-out;
}
div.videoPreview:hover img.playButton {
opacity: 0;
}
div.videoPreviewBox p {
margin-top: 2%;
color: white;
line-height: 18px;
}
.player_wrapper{float: left;}
.player{float: left;clear: both;}
.scroller{margin-bottom: 35px; float: left;clear: both; width: 100%;}
.rssIcon{float: left;clear: both;}
.scroll_item{clear: left; float: left;}
.thumb_img{margin-right: 12px; margin-bottom: 25px; float: left; border-color: white; border-width: 2px; border-style: solid; background-color: #dddddd; height: 135px;}
.preview{ width: 600px; }.play_button{padding: 8px; background-color: #e9e9e9; border-color: #c9c9c9; border-width: 1px; border-style: solid; float: right;}
.rssIcon{width: 100%;}
.gallery_thumb{margin-bottom: 12px; margin-right: 12px; }
.gallery_thumb:hover{cursor: pointer;}
.mejs-container{margin-top: 20px!important}
而完整的PHP庫視圖文件：
<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$btID = $b->getBlockTypeID();
$bt = BlockType::getByID($btID);
$uh = Loader::helper('concrete/urls');
$rssUrl = $controller->getRssUrl($b);
$textHelper = Loader::helper("text");
$fl = Loader::model('file_version');
$uh = Loader::helper('concrete/urls');
$mh = Loader::helper('media_type','promedia');
$bt = BlockType::getByHandle('promedia_list');
$height = '400';
$width = '600';
$spread = 4;
$playerID = rand(0,777777);
if (count($cArray) > 0) { ?>
<div class="scroller">
<div id="media_galery">
<?php
$t = 0;
for ($i = 0; $i < count($cArray); $i++) {
$t++;
$file = $cArray[$i];
$remote = null;
$name = $file->getFileName();
$file_path = BASE_URL.DIR_REL.$file->getDownloadURL();
$ak_d = FileAttributeKey::getByHandle('media_date');
$date = $file->getAttribute($ak_d);
$ak_a = FileAttributeKey::getByHandle('media_artwork');
$image = $file->getAttribute($ak_a);
if($image==null){
$image_path=$uh->getBlockTypeAssetsURL($bt).'/tools/mp3.png';
}else{
$image = File::getByID($image->fID);
$image_path=$image->getURL();
}
$file_src = BASE_URL.DIR_REL.$file->getRelativePath();
$ak_s = FileAttributeKey::getByHandle('media_audio');
$audio = $file->getAttribute($ak_s);
if($audio){
$audio_array = $mh->getMediaTypeOutput($audio);
$audio_path = $audio_array['path'];
$file_src = $audio_path;
}
$video = null;
$ak_s = FileAttributeKey::getByHandle('media_video');
$video = $file->getAttribute($ak_s);
if($video){
$video_array = $mh->getMediaTypeOutput($video);
$video_path = $video_array['path'];
//var_dump($video_array['id']);
$image_path = $mh->getMediaThumbnail($video_array['id'],$video_array['type']);
//$video_src = $video_path.'?width='.$width.'&height='.$height;
//$file_src = $video_src;
if($video_array['type'] == 'vimeo'){
$file_src = 'http://player.vimeo.com/video/'.$video_array['id'];
}else{
$file_src = $video_path;
}
}
?>
<div class="media-thumb videoPreviewBox">
<div class="videoPreview">
</a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/>
<img class="playButtonHover" src="<?php echo $this->getThemePath()?>/images/playButtonHover.png">
<img class="playButton" src="<?php echo $this->getThemePath()?>/images/playButton.png">
</div>
</div>
<?php
if($t == $spread){
$t=0;
echo '</tr>';
}
}
for($d=$t;$d<$spread;$d++){
echo '<td></td>';
if($t == $spread){
echo '</tr>';
}
}
?>
</div>
</div>
<div style="display: none;">
<div id="popup_prep">
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
$('.gallery_thumb').fancybox({
width: 'auto',
height: 'auto',
onClosed: function(){
$('video, audio').each(function() {
$(this)[0].player.pause();
});
}
});
});
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
$('.gallery_thumb').click(function(){
$('#popup_prep').html('');
var html = '';
var path = $(this).attr('alt');
//console.log(path);
var extension = path.substr((path.lastIndexOf('.') +1));
if(extension){
switch(extension) {
case 'm4v':
case 'mpeg':
case 'mpg':
case 'wmv':
case 'avi':
case 'mov':
case 'flv':
case 'f4v':
case 'mp4':
html = '<video class="player_box" id="play" controls="controls" src="'+path+'" width="<?php echo $width?>" height="<?php echo $height?>"></video><br style="clear: both;"/>';
break;
case 'mp3':
case 'm4a':
html = '<audio class="audioplayer" id="play" src="'+path+'" controls="controls" type="audio/m4a"></audio><br style="clear: both;"/>';
break;
default:
var iFrame = true;
html = '<iframe title="video player" width="<?php echo $width?>px" height="<?php echo $height?>px" src="'+path+'" frameborder="0" allowfullscreen></iframe>';
}
}
$('#popup_prep').append(innerShiv(html));
if(!iFrame){
var player = new MediaElementPlayer('video,audio');
}
});
/*]]>*/
</script>
<?php
}
if(!$previewMode && $controller->rss) {
?>
<div class="rssIcon">
<img src="<?php echo $uh->getBlockTypeAssetsURL($bt, 'rss.png')?>" width="14" height="14" /><a href="<?php echo $rssUrl?>" target="_blank">get this feed</a>
</div>
<link href="<?php echo $rssUrl?>" rel="alternate" type="application/rss+xml" title="<?php echo $controller->rssTitle?>" />
<br/>
<?php
}
if ($paginate && $num > 0 && is_object($_fl)) {
$_fl->displayPaging();
}
?>
對於完整的上下文，here是頁面。