|
@@ -117,7 +117,7 @@ class CommonHelper
|
|
|
} else {
|
|
|
$thumbnailUrl = CommonHelper::albumUrl($cover) . "?x-oss-process=image/resize,m_pad,h_{$boxSize},w_{$boxSize},color_ffffff";
|
|
|
}
|
|
|
- $html .= '<div class="video-container"><a href="#" class="playVideo" videoUrl="'.$videoUrl.'")"><img src="'.$thumbnailUrl.'" alt="Video Thumbnail"><div class="play-button"></div></a></div>';
|
|
|
+ $html .= '<div class="video-container"><img src="'.$thumbnailUrl.'" alt="Video Thumbnail" class="video-thumbnail"><a href="#" class="downloadVideo" videoUrl="'.$videoUrl.'")"><div class="video-download-button"></div></a> <a href="#" class="playVideo" videoUrl="'.$videoUrl.'")"><div class="play-button"></div></a></div>';
|
|
|
}
|
|
|
$html .= '<div class="video-popup" id="videoPopup"><span class="close-btn">×</span> <iframe src="" frameborder="0" allowfullscreen></iframe></div>';
|
|
|
}
|
|
@@ -132,20 +132,41 @@ class CommonHelper
|
|
|
margin-right: 5px;
|
|
|
border: 1px solid #ececf1;
|
|
|
}
|
|
|
- .play-button {
|
|
|
+ .video-download-button {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 35%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .video-download-button::after {
|
|
|
+ content: '↓';
|
|
|
+ font-size: 15px;
|
|
|
+ color: white;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ }
|
|
|
+
|
|
|
+ .play-button {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 58%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 50%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.play-button::after {
|
|
|
content: '▶';
|
|
|
- font-size: 30px;
|
|
|
+ font-size: 15px;
|
|
|
color: white;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
@@ -188,6 +209,24 @@ class CommonHelper
|
|
|
$('#videoPopup iframe').attr('src', videoUrl); // 设置 iframe 的 src
|
|
|
});
|
|
|
|
|
|
+ $('.downloadVideo').on('click', function(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ const videoUrl = $(this).attr('videoUrl');
|
|
|
+ const \$tempLink = $('<a>', {
|
|
|
+ href: videoUrl,
|
|
|
+ download: ''
|
|
|
+ }).hide();
|
|
|
+ $('body').append(\$tempLink);
|
|
|
+ \$tempLink[0].click();
|
|
|
+ \$tempLink.remove();
|
|
|
+ setTimeout(() => {
|
|
|
+ if(!document.querySelector('a[download]')) {
|
|
|
+ console.error('下载失败:链接无效或CORS限制');
|
|
|
+ alert('视频下载失败,请联系管理员');
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ });
|
|
|
|
|
|
// 点击关闭按钮关闭视频
|
|
|
$('.close-btn').on('click', function() {
|
|
@@ -408,10 +447,9 @@ Admin::script(
|
|
|
$('.box-body').find("img").each(function() {
|
|
|
// 新增判断:如果父元素是<a>或已有download-wrapper则跳过
|
|
|
if ($(this).parent().hasClass('download-wrapper') || $(this).parent().is('a')) return;
|
|
|
- if ($(this).hasClass('fullscreen-image')) {
|
|
|
+ if ($(this).hasClass('fullscreen-image') || $(this).hasClass('video-thumbnail')) {
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
const fileName = this.src.split('/').pop().split('?')[0];
|
|
|
|
|
|
$(this).wrap('<div class="download-wrapper"></div>')
|
|
@@ -452,6 +490,7 @@ Admin::script(
|
|
|
});
|
|
|
|
|
|
function downloadImage(url, filename) {
|
|
|
+ url = url.replace(/\?.*$/, '');
|
|
|
return new Promise((resolve, reject) => {
|
|
|
fetch(url)
|
|
|
.then(response => {
|