容器View More按钮无法完全展开视频问题求助

问题根源 #

视频元素加载是异步过程，DOMContentLoaded触发时视频还未完成加载，此时计算的scrollHeight只是容器初始高度，并非视频加载后的真实高度。另外，展开时依赖scrollHeight设置容器最大高度，也会因视频尺寸未完全确定导致高度计算错误。

修复方案 #

1. 监听视频加载事件：等待视频loadedmetadata事件触发后，再判断容器是否需要显示View More按钮
2. 展开时取消高度限制：点击View More时，直接将容器maxHeight设为none，让容器自适应内容高度
3. 优化CSS样式：确保视频容器在展开状态下能正确包裹视频

修改后的完整代码 #

<?php
session_start();
$nickname = isset($_SESSION['nickname']) ? $_SESSION['nickname'] : 'Guest';

// Database connection
$conn = new mysqli("localhost", "root", "", "forum");

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

date_default_timezone_set("Asia/Kuala_Lumpur");
$discussion_id = isset($_GET['id']) ? intval($_GET['id']) : 0;

// Fetch discussion details
$discussion_sql = "SELECT * FROM discussions WHERE id = $discussion_id";
$result = $conn->query($discussion_sql);
if ($result->num_rows > 0) {
    $discussion = $result->fetch_assoc();
} else {
    echo "Discussion not found.";
    exit();
}

// Fetch comments and replies
// Add your existing code here for comments and replies...

$conn->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discussion</title>
    <style>
        .discussion-video-container {
            overflow: hidden;
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 10px auto;
            background: #000;
            transition: max-height 0.3s ease; /* 添加过渡动画提升体验 */
        }

        .discussion-video {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        .discussion-video-container.expanded {
            max-height: none !important; /* 展开时取消高度限制 */
        }

        .view-more {
            display: none;
            cursor: pointer;
            color: #007bff;
            text-decoration: underline;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="forum-discussion">
        <!-- Discussion content -->
        <div class="subforum-description">
            <?php if (!empty($discussion['video_path'])): ?>
                <div class="discussion-video-container">
                    <video controls class="discussion-video" id="discussionVideo">
                        <source src="<?php echo htmlspecialchars($discussion['video_path']); ?>" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
            <?php endif; ?>
            <button class="view-more" id="viewMoreBtn" onclick="toggleVideo()">View More</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const videoContainer = document.querySelector('.discussion-video-container');
            const viewMoreButton = document.getElementById('viewMoreBtn');
            const video = document.getElementById('discussionVideo');
            const maxHeight = 450; // 初始折叠高度

            // 设置初始最大高度
            videoContainer.style.maxHeight = maxHeight + 'px';

            // 监听视频元数据加载完成事件，确保获取真实尺寸
            video.addEventListener('loadedmetadata', function() {
                if (videoContainer.scrollHeight > maxHeight) {
                    viewMoreButton.style.display = 'inline-block';
                }
            });

            // 兼容视频已缓存完成的情况
            if (video.readyState >= 2) {
                if (videoContainer.scrollHeight > maxHeight) {
                    viewMoreButton.style.display = 'inline-block';
                }
            }
        });

        function toggleVideo() {
            const videoContainer = document.querySelector('.discussion-video-container');
            const viewMoreButton = document.getElementById('viewMoreBtn');

            if (videoContainer.classList.contains('expanded')) {
                videoContainer.classList.remove('expanded');
                videoContainer.style.maxHeight = '450px'; // 折叠回初始高度
                viewMoreButton.innerText = 'View More';
            } else {
                videoContainer.classList.add('expanded');
                viewMoreButton.innerText = 'View Less';
            }
        }
    </script>
</body>
</html>

关键修改说明 #

• JavaScript逻辑：新增loadedmetadata事件监听，确保视频尺寸加载完成后再判断是否显示按钮；展开时通过添加expanded类取消容器高度限制，不再依赖scrollHeight计算
• CSS样式：为.discussion-video-container.expanded添加max-height: none，确保展开时容器自适应视频高度；添加过渡动画提升交互体验
• 兼容性处理：增加视频缓存状态判断，避免视频已加载时按钮不显示的问题

内容的提问来源于stack exchange，提问作者Lee