You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
184 lines
7.1 KiB
184 lines
7.1 KiB
<?php
|
|
/**
|
|
* 视频Banner区块模板
|
|
*/
|
|
|
|
// 检查是否从简码调用
|
|
global $video_banner_shortcode_values;
|
|
|
|
if (isset($video_banner_shortcode_values)) {
|
|
// 从简码获取配置
|
|
$bg_image = $video_banner_shortcode_values['video_banner_bg_image'];
|
|
$height = $video_banner_shortcode_values['video_banner_height'];
|
|
$video_bg_enabled = $video_banner_shortcode_values['video_banner_video_bg_enabled'];
|
|
$video_bg_url = $video_banner_shortcode_values['video_banner_video_bg_url'];
|
|
$video_bg_opacity = $video_banner_shortcode_values['video_banner_video_bg_opacity'];
|
|
$video_bg_lazy_load = $video_banner_shortcode_values['video_banner_video_bg_lazy_load'];
|
|
$block_id = $video_banner_shortcode_values['video_banner_block_id'];
|
|
$block_class = $video_banner_shortcode_values['video_banner_block_class'];
|
|
} else {
|
|
// 获取区块ID和类名
|
|
$block_id = isset($block['id']) ? $block['id'] : 'video-banner-' . uniqid();
|
|
$block_class = isset($block['className']) ? $block['className'] : '';
|
|
|
|
// 获取视频Banner配置
|
|
$bg_image = get_video_banner_bg_image();
|
|
$height = get_video_banner_height();
|
|
|
|
// 视频背景配置
|
|
$video_bg_enabled = get_video_banner_enable_background();
|
|
$video_bg_url = get_video_banner_background_url();
|
|
$video_bg_opacity = get_video_banner_background_opacity();
|
|
$video_bg_lazy_load = get_video_banner_enable_lazy_load();
|
|
|
|
// 设置默认值
|
|
$height = $height ?: '80vh';
|
|
$video_bg_opacity = ($video_bg_opacity ?: 80) / 100; // 转换为0-1的小数
|
|
}
|
|
|
|
// 生成唯一ID
|
|
$unique_id = 'video-banner-' . uniqid();
|
|
?>
|
|
|
|
<div class="video-banner-block <?php echo esc_attr($block_class); ?>" id="<?php echo esc_attr($block_id); ?>">
|
|
<div class="video-banner-container"
|
|
id="<?php echo esc_attr($unique_id); ?>"
|
|
style="height: <?php echo esc_attr($height); ?>;"
|
|
data-height="<?php echo esc_attr($height); ?>">
|
|
|
|
<!-- 背景图片 -->
|
|
<?php if ($bg_image): ?>
|
|
<div class="video-banner-bg-image" style="background-image: url('<?php echo esc_url($bg_image); ?>');">
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- 视频背景 -->
|
|
<?php if ($video_bg_enabled && $video_bg_url): ?>
|
|
<div class="video-background-container" style="opacity: 1;">
|
|
<video class="video-background"
|
|
autoplay
|
|
muted
|
|
loop
|
|
playsinline
|
|
<?php echo $video_bg_lazy_load ? 'preload="none"' : 'preload="auto"'; ?>>
|
|
<source src="<?php echo esc_url($video_bg_url); ?>" type="video/mp4">
|
|
您的浏览器不支持视频播放。
|
|
</video>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- 视频内容 -->
|
|
<?php if (get_video_banner_content_title() || get_video_banner_content_subtitle() || get_video_banner_content_description()): ?>
|
|
<div class="video-banner-content">
|
|
<?php if (get_video_banner_content_title()): ?>
|
|
<h1 class="video-banner-title"><?php echo esc_html(get_video_banner_content_title()); ?></h1>
|
|
<?php endif; ?>
|
|
|
|
<?php if (get_video_banner_content_subtitle()): ?>
|
|
<h2 class="video-banner-subtitle"><?php echo esc_html(get_video_banner_content_subtitle()); ?></h2>
|
|
<?php endif; ?>
|
|
|
|
<?php if (get_video_banner_content_description()): ?>
|
|
<p class="video-banner-description"><?php echo esc_html(get_video_banner_content_description()); ?></p>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<?php
|
|
// 动态加载video-banner相关资源
|
|
if (!wp_style_is('video-banner-css', 'enqueued')) {
|
|
$theme_url = get_template_directory_uri();
|
|
$theme_path = get_template_directory();
|
|
$css_file = '/assets/css/video-banner.css';
|
|
|
|
if (file_exists($theme_path . $css_file)) {
|
|
wp_enqueue_style('video-banner-css', $theme_url . $css_file, array(), '1.0.0');
|
|
} else {
|
|
error_log('Missing CSS file: ' . $theme_path . $css_file);
|
|
}
|
|
}
|
|
|
|
if (!wp_script_is('video-banner-js', 'enqueued')) {
|
|
$theme_url = get_template_directory_uri();
|
|
$theme_path = get_template_directory();
|
|
$js_file = '/assets/js/video-banner.js';
|
|
|
|
if (file_exists($theme_path . $js_file)) {
|
|
// 确保GSAP已加载
|
|
wp_enqueue_script('gsap', $theme_url . '/assets/js/gsap.min.js', array('jquery'), '3.12.2', true);
|
|
wp_enqueue_script('video-banner-js', $theme_url . $js_file, array('jquery', 'gsap'), '1.0.0', true);
|
|
} else {
|
|
error_log('Missing JS file: ' . $theme_path . $js_file);
|
|
}
|
|
}
|
|
?>
|
|
|
|
<script>
|
|
// 确保视频背景功能正常工作
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化视频背景
|
|
const videoContainers = document.querySelectorAll('.video-banner-container');
|
|
videoContainers.forEach(function(container) {
|
|
const video = container.querySelector('.video-background');
|
|
if (video) {
|
|
// 确保视频自动播放
|
|
video.play().catch(function(error) {
|
|
console.log('视频自动播放失败:', error);
|
|
});
|
|
|
|
// 监听视频加载
|
|
video.addEventListener('loadeddata', function() {
|
|
video.style.opacity = '1';
|
|
});
|
|
}
|
|
});
|
|
|
|
// 初始化视频播放按钮
|
|
const playButtons = document.querySelectorAll('.video-play-button');
|
|
playButtons.forEach(function(button) {
|
|
button.addEventListener('click', function() {
|
|
const videoUrl = this.getAttribute('data-video-url');
|
|
const videoTitle = this.getAttribute('data-video-title');
|
|
|
|
if (videoUrl) {
|
|
// 创建视频模态框
|
|
const modal = document.createElement('div');
|
|
modal.className = 'video-modal';
|
|
modal.innerHTML = `
|
|
<div class="video-modal-content">
|
|
<div class="video-modal-header">
|
|
<h3>${videoTitle}</h3>
|
|
<button class="video-modal-close">×</button>
|
|
</div>
|
|
<div class="video-modal-body">
|
|
<video controls autoplay>
|
|
<source src="${videoUrl}" type="video/mp4">
|
|
您的浏览器不支持视频播放。
|
|
</video>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
|
|
// 关闭模态框
|
|
const closeBtn = modal.querySelector('.video-modal-close');
|
|
closeBtn.addEventListener('click', function() {
|
|
document.body.removeChild(modal);
|
|
});
|
|
|
|
// 点击背景关闭
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === modal) {
|
|
document.body.removeChild(modal);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|