Browse Source

add video player for theme beauty

master
filesite 5 months ago
parent
commit
838e49a941
  1. 3
      conf/app.php
  2. 6
      lib/DirScanner.php
  3. 1
      themes/beauty/controller/ListController.php
  4. 28
      themes/beauty/controller/SiteController.php
  5. 57
      themes/beauty/views/layout/player.php
  6. 41
      themes/beauty/views/site/index.php
  7. 38
      themes/beauty/views/site/player.php
  8. 7
      www/css/beauty.css
  9. BIN
      www/img/beauty/video_dir.png
  10. BIN
      www/img/beauty/video_snap.jpg
  11. 57
      www/js/beauty.js

3
conf/app.php

@ -49,6 +49,9 @@ $configs = array( @@ -49,6 +49,9 @@ $configs = array(
'supportedImageExts' => array('jpg', 'jpeg', 'png', 'webp', 'gif'),
),
'supportedImageExts' => array('jpg', 'jpeg', 'png', 'webp', 'gif'),
'supportedVideoExts' => array('mp4', 'mov', 'm3u8'),
/*
//视频皮肤配置
'videoblog' => array(

6
lib/DirScanner.php

@ -282,7 +282,7 @@ Class DirScanner { @@ -282,7 +282,7 @@ Class DirScanner {
}
//合并描述文件内容到md文件或者目录数据
//增加视频文件:mp4, m3u8描述文件支持
//增加视频文件:mp4, mov, m3u8描述文件支持
//增加.url文件支持
private function mergeDescriptionData($realpath) {
$data = array();
@ -292,12 +292,15 @@ Class DirScanner { @@ -292,12 +292,15 @@ Class DirScanner {
$targetFile = '';
$targetFile_md = preg_replace('/_?[a-z0-9]+\.txt$/U', '.md', $realpath);
$targetFile_mp4 = preg_replace('/_?[a-z0-9]+\.txt$/U', '.mp4', $realpath);
$targetFile_mov = preg_replace('/_?[a-z0-9]+\.txt$/U', '.mov', $realpath);
$targetFile_m3u8 = preg_replace('/_?[a-z0-9]+\.txt$/U', '.m3u8', $realpath);
$targetFile_url = preg_replace('/_?[a-z0-9]+\.txt$/U', '.url', $realpath);
if (file_exists($targetFile_md)) {
$targetFile = $targetFile_md;
}else if (file_exists($targetFile_mp4)) {
$targetFile = $targetFile_mp4;
}else if (file_exists($targetFile_mov)) {
$targetFile = $targetFile_mov;
}else if (file_exists($targetFile_m3u8)) {
$targetFile = $targetFile_m3u8;
}else if (file_exists($targetFile_url)) {
@ -399,6 +402,7 @@ Class DirScanner { @@ -399,6 +402,7 @@ Class DirScanner {
'ico' => "{$webRoot}{$directory}{$filename}.{$extension}",
'mp3' => "{$webRoot}{$directory}{$filename}.{$extension}",
'mp4' => "{$webRoot}{$directory}{$filename}.{$extension}",
'mov' => "{$webRoot}{$directory}{$filename}.{$extension}",
'ts' => "{$webRoot}{$directory}{$filename}.{$extension}",
);

1
themes/beauty/controller/ListController.php

@ -85,7 +85,6 @@ Class ListController extends Controller { @@ -85,7 +85,6 @@ Class ListController extends Controller {
$scanResults = array($cateId => $currentDir); //重新组装数据
}
//非首页统一从缓存获取目录数据,有效期 1 小时
$cacheKey = $this->getCacheKey('all', 'menu', $maxScanDeep);
$menus = Common::getCacheFromFile($cacheKey, 3600);

28
themes/beauty/controller/SiteController.php

@ -173,6 +173,15 @@ Class SiteController extends Controller { @@ -173,6 +173,15 @@ Class SiteController extends Controller {
$imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
$url = $scanner->getSnapshotImage($realpath, $imgExts);
//支持视频目录
if (empty($url)) {
$videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
$firstVideoPath = $scanner->getSnapshotImage($realpath, $videoExts);
if (!empty($firstVideoPath)) {
$url = '/img/beauty/video_dir.png';
}
}
}else {
$code = 0;
$msg = '缓存数据已失效,请刷新网页';
@ -182,4 +191,23 @@ Class SiteController extends Controller { @@ -182,4 +191,23 @@ Class SiteController extends Controller {
return $this->renderJson(compact('code', 'msg', 'url'));
}
public function actionPlayer() {
$videoUrl = $this->get('url', '');
if (empty($videoUrl)) {
throw new Exception("缺少视频地址url参数!", 403);
}
$arr = parse_url($videoUrl);
$videoFilename = basename($arr['path']);
$pageTitle = "视频播放器";
$this->layout = 'player';
$viewName = 'player';
$params = compact(
'videoUrl', 'videoFilename'
);
return $this->render($viewName, $params, $pageTitle);
}
}

57
themes/beauty/views/layout/player.php

@ -0,0 +1,57 @@ @@ -0,0 +1,57 @@
<?php
//常用方法
require_once __DIR__ . '/../../../../plugins/Html.php';
?><!DocType html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $pageTitle; ?></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/x-icon" href="/favicon.ico?v1.0">
<link href="/css/main.css?v.1.1" rel="stylesheet">
<!--for theme beauty-->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/video-js.min.css" rel="stylesheet">
<link href="/css/beauty.css?v<?= Html::getStaticFileVersion('beauty.css', 'css') ?>" rel="stylesheet">
</head>
<body>
<div class="main_style">
<?php
//### Render view file
if (!empty($viewFile) && file_exists($viewFile)) {
include_once $viewFile;
}
?>
<!-- 尾部网站信息 -->
<footer class="web_info vercenter">
<div class="qrcode text-center">
<p>用手机扫码打开</p>
<div id="qrimg"></div>
</div>
<p>
<span>&copy;2022 - <?=date('Y')?></span>
by <a href="https://filesite.io/" target="_blank">FileSite.io</a>
<br>
<?php if (!empty(FSC::$app['config']['theme'])) { ?>
当前皮肤 <strong><?php echo FSC::$app['config']['theme']; ?></strong>
- 执行耗时: {page_time_cost} ms
<?php } ?>
<br>友情链接:<a href="https://tajian.tv" target="_blank">Ta荐 - 你的聚宝盆</a>
</p>
</footer>
</div>
<!--for theme googleimage-->
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/qrcode.min.js"></script>
<script src="/js/video.min.js"></script>
<script src="/js/beauty.js?v<?= Html::getStaticFileVersion('beauty.js', 'js') ?>"></script>
<?php echo Html::getGACode(); ?>
</body>
</html>

41
themes/beauty/views/site/index.php

@ -58,11 +58,13 @@ eof; @@ -58,11 +58,13 @@ eof;
<?php
$imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
$videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
$supportedExts = array_merge($imgExts, $videoExts);
$category = !empty($viewData['scanResults'][$selectedId]) ? $viewData['scanResults'][$selectedId] : [];
$total = 0; //翻页支持
if (!empty($category['files'])) {
$total = Html::getDataTotal($category['files'], $imgExts); //翻页支持
$total = Html::getDataTotal($category['files'], $supportedExts); //翻页支持
}
@ -189,11 +191,12 @@ eof; @@ -189,11 +191,12 @@ eof;
echo '<div class="im_mainl row">';
}
//显示图片、视频
if (!empty($category['files'])) { //一级目录支持
$pageStartIndex = ($viewData['page']-1) * $viewData['pageSize'];
$index = 0;
foreach ($category['files'] as $file) {
if (empty($file['extension']) || !in_array($file['extension'], $imgExts)) {
if (empty($file['extension']) || !in_array($file['extension'], $supportedExts)) {
continue;
}
@ -212,6 +215,7 @@ eof; @@ -212,6 +215,7 @@ eof;
}
if ($index > 0) {
if (in_array($file['extension'], $imgExts)) {
echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="{$title} - {$file['filename']}" title="{$title} - {$file['filename']}">
@ -224,7 +228,25 @@ eof; @@ -224,7 +228,25 @@ eof;
</a>
</div>
eof;
}else if (in_array($file['extension'], $videoExts)) { //输出视频
$videoUrl = urlencode($file['path']);
echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="/site/player?url={$videoUrl}" target="_blank" class="bor_radius" title="{$title} - {$file['filename']}">
<img src="/img/beauty/video_snap.jpg" class="bor_radius im_img" alt="{$file['filename']}">
<div class="im_img_title">
<span class="right-bottom">
{$title}
</span>
</div>
</a>
</div>
eof;
}
} else {
if (in_array($file['extension'], $imgExts)) {
echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="{$title} - {$file['filename']}" title="{$title} - {$file['filename']}">
@ -237,6 +259,21 @@ eof; @@ -237,6 +259,21 @@ eof;
</a>
</div>
eof;
}else if (in_array($file['extension'], $videoExts)) { //输出视频
$videoUrl = urlencode($file['path']);
echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="/site/player?url={$videoUrl}" target="_blank" class="bor_radius" title="{$title} - {$file['filename']}">
<img src="/img/beauty/video_snap.jpg" class="bor_radius im_img" alt="{$file['filename']}">
<div class="im_img_title">
<span class="right-bottom">
{$title}
</span>
</div>
</a>
</div>
eof;
}
}
$index++;

38
themes/beauty/views/site/player.php

@ -0,0 +1,38 @@ @@ -0,0 +1,38 @@
<?php
//视频播放器
?>
<!-- 顶部导航栏模块 -->
<nav class="navbar navbar-default navbar-fixed-top navbarJS">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display navbar-inverse-->
<div class="navbar-header">
<div class="navbar-toggle">
<img class="svg icon1 svgimg lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯">
</div>
<a class="navbar-brand" href="/">
<span class="verMiddle">家庭相册</span>
</a>
<span class="navbar-text videotitle"><?php echo $viewData['videoFilename']; ?></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="nb_right nav navbar-nav navbar-right hidden-xs">
<img class="svg icon1 svgimg iconr2 lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯">
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="videoplayer">
<video class="video-js vjs-big-play-centered vjs-fluid vjs-16-9"
controls
playsinline
data-setup='{"autoplay":"muted"}'
poster=""
id="myvideo">
<source src="<?php echo $viewData['videoUrl']; ?>" type="video/mp4">
</video>
</div>

7
www/css/beauty.css

@ -75,7 +75,7 @@ a:link{text-decoration:none} @@ -75,7 +75,7 @@ a:link{text-decoration:none}
.im_img:hover{transform:scale(1.03)}
.im_item{padding:5px;height:16vw;overflow:hidden}
.im_item>a{overflow: hidden;display:block;position:relative;width: 100%;height: 100%}
.im_img_title{background:rgba(7, 7, 7, .1);position:absolute;left:0;right:0;bottom:0;top:0;color:#DDD;border-radius:10px}
.im_img_title{background:rgba(7, 7, 7, .1);position:absolute;left:0;right:0;bottom:0;top:0;color:#EEE;border-radius:10px}
.im_img_title span{position:absolute;bottom:10px;left:10px;margin-right:10px;font-weight:bold;padding:3px;border:solid 1px #DDD;border-radius:6px;font-size:13px}
.im_img_title .right-bottom{left:auto;right:5px;bottom:5px;margin-right:0;padding:0 2px;font-size:11px;border:0 none;font-weight:300;color:#CCC}
.im_img_title img{vertical-align:bottom}
@ -123,6 +123,10 @@ a:link{text-decoration:none} @@ -123,6 +123,10 @@ a:link{text-decoration:none}
#qrimg{width:160px;height:160px;margin:0 auto 20px auto;background-color:#FFF;padding:5px;border:1px solid #EEE;border-radius:5px}
.videoplayer{max-width:800px;margin:0 auto;text-align:center}
.videoplayer video{width:100%}
.videotitle{max-width:600px;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}
@media screen and (max-width: 1199px) {
.im_item {
height: 23vw;
@ -144,6 +148,7 @@ a:link{text-decoration:none} @@ -144,6 +148,7 @@ a:link{text-decoration:none}
.img_main{margin-left:0}
.pagination>li>a, .pagination>li>span{padding:3px 7px}
.videotitle{max-width:55%}
}
@keyframes musicTurn {

BIN
www/img/beauty/video_dir.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

BIN
www/img/beauty/video_snap.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

57
www/js/beauty.js

@ -65,18 +65,20 @@ if ($('#image_site').get(0)) { @@ -65,18 +65,20 @@ if ($('#image_site').get(0)) {
}, 500);
});
}
// 白天黑夜模式切换
var saveLanpnumToLocalstorage = function(lanpnum) {
// 白天黑夜模式切换
var saveLanpnumToLocalstorage = function(lanpnum) {
try {
var key = 'user_lanpnum';
localStorage.setItem(key, lanpnum);
}catch(err) {
console.error('保存本地存储失败', err);
}
};
};
var getLanpnumFromLocalstorage = function() {
var getLanpnumFromLocalstorage = function() {
try {
var key = 'user_lanpnum';
return localStorage.getItem(key);
@ -85,32 +87,32 @@ if ($('#image_site').get(0)) { @@ -85,32 +87,32 @@ if ($('#image_site').get(0)) {
}
return false;
};
};
var toggleLampshow = function(lanpnum) {
var toggleLampshow = function(lanpnum) {
if (lanpnum == 1) {
$('#markdowncss').attr('href', '/css/github-markdown-dark.css');
$(document.body).addClass('lampshow');
$('#image_site .navbarJS').removeClass('navbar-default').addClass('navbar-inverse'); // 导航栏用bootstrap主题切换
$('.navbarJS').removeClass('navbar-default').addClass('navbar-inverse'); // 导航栏用bootstrap主题切换
} else if (lanpnum == 0) {
$('#markdowncss').attr('href', '/css/github-markdown-light.css');
$(document.body).removeClass('lampshow');
$('#image_site .navbarJS').addClass('navbar-default').removeClass('navbar-inverse');
$('.navbarJS').addClass('navbar-default').removeClass('navbar-inverse');
}
};
};
var lanpnum = getLanpnumFromLocalstorage();
if (lanpnum !== false) {
var lanpnum = getLanpnumFromLocalstorage();
if (lanpnum !== false) {
toggleLampshow(lanpnum);
}
$('#image_site .lampJS').click(function () {
}
$('.lampJS').click(function () {
lanpnum = !lanpnum || lanpnum != 1 ? 1 : 0;
toggleLampshow(lanpnum);
saveLanpnumToLocalstorage(lanpnum);
});
});
//异步加载目录的封面图
$('.dir_item').each(function(index, el) {
//异步加载目录的封面图
$('.dir_item').each(function(index, el) {
var cid = $(el).attr('data-cid'), id = $(el).attr('data-id');
if ($(el).find('.im_img').length == 0) {
$.ajax({
@ -131,10 +133,11 @@ if ($('#image_site').get(0)) { @@ -131,10 +133,11 @@ if ($('#image_site').get(0)) {
console.error('获取封面图失败,错误信息:' + errorThrown);
});
}
});
});
//刷新缓存
$('.cleanCacheJS').click(function () {
//刷新缓存
$('.cleanCacheJS').click(function () {
$.ajax({
url: '/site/cleancache',
dataType: 'json',
@ -148,10 +151,10 @@ if ($('#image_site').get(0)) { @@ -148,10 +151,10 @@ if ($('#image_site').get(0)) {
}).fail(function(jqXHR, textStatus, errorThrown) {
alert('请求失败,请稍后重试,错误信息:' + errorThrown);
});
});
});
// 音乐播放
if ($('#music_main').length > 0) {
// 音乐播放
if ($('#music_main').length > 0) {
var musicState = 0;
$('#music_main').get(0).volume = 0.5; // 控制音量
$('.musicJS').click(function () {
@ -172,16 +175,14 @@ if ($('#image_site').get(0)) { @@ -172,16 +175,14 @@ if ($('#image_site').get(0)) {
$('.musicJS').addClass('music_put');
musicState = 1;
});
}
}
//二维码显示
if ($('#qrimg').length > 0 && typeof(QRCode) != 'undefined') {
//二维码显示
if ($('#qrimg').length > 0 && typeof(QRCode) != 'undefined') {
var qrcode = new QRCode("qrimg", {
text: location.href,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
correctLevel : QRCode.CorrectLevel.L
});
}
}
Loading…
Cancel
Save