滚动页面时视频缩略图右下角悬浮展示与点击返回效果

已于 2024-11-17 07:27:29 修改
阅读量904 收藏 15
点赞数 24
CC 4.0 BY-SA版权
文章标签： 音视频 视频 javascript css3 html5 网页下滑视频缩略
于 2024-11-17 07:20:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ABcd110111/article/details/143827044

教程标题：滚动页面时视频缩略图右下角悬浮展示与点击返回效果

欢迎来到今天的前端小课堂！在这个教程中，我们将实现一个炫酷的小功能：当用户滚动页面时，视频会自动变成右下角的小缩略图，而当用户点击缩略图时，它还能优雅地跳回页面原位。让我们一步步拆解，看看是如何实现的！

一、功能效果介绍

效果展示地址：【罗翔】我们为什么要读书？

在现代网页设计中，提升用户体验是设计的关键。以下是我们今天要实现的功能：

  • 主视频展示：初始状态下，视频全屏居中显示。

  • 右下角缩略图：当用户滚动页面，视频离开视口后，自动变为右下角的悬浮缩略图。

  • 返回原位：点击右下角缩略图，页面平滑滚动回到主视频位置，视频恢复全屏模式。

这个功能适合在资讯网站、视频播放平台等场景下使用，简直不要太实用！

二、实现思路

1. 界面布局

我们需要两个主要部分：

  1. 主视频区域：用于展示初始视频。

  2. 页面内容：模拟长页面，触发滚动事件。

HTML 的结构非常简单，包含一个全屏视频区域以及长内容区：

<!-- 视频区域 -->
<div class="video-container" id="videoContainer">
    <iframe 
        id="videoPlayer"
        src="//player.bilibili.com/player.html?isOutside=true&aid=497651138&bvid=BV1BK411L7DJ&cid=177974677&p=1" 
        frameborder="0" 
        scrolling="no" 
        allowfullscreen="true">
    </iframe>
</div>

<!-- 内容部分 -->
<div class="content">
    <h1>优化滚动缩略图</h1>
    <p>滚动页面，视频完全离开视口后会以缩略图形式显示在右下角。</p>
    <p>点击缩略图，页面会回到主视频位置。</p>
    <p>模拟长内容...</p>
    <p>继续滚动测试...</p>
</div>

2. CSS 样式

使用 CSS 来定义视频的初始状态和缩略图样式。缩略图默认隐藏：

/* 视频初始样式 */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 比例 */
    background: #000;
    overflow: hidden;
    z-index: 1000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 缩略图样式 */
.video-thumbnail {
    display: none; /* 默认隐藏 */
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px; /* 缩略图大小 */
    height: 180px;
    border: 2px solid #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    cursor: pointer;
}

3. 核心 JavaScript 逻辑

通过 JavaScript，监听滚动事件和缩略图点击事件来动态调整视频位置。

监听滚动事件

  • 当页面滚动超过视频区域时，切换到缩略图模式。

  • 当返回视频区域时，恢复全屏模式。

// 获取元素
        const videoContainer = document.getElementById('videoContainerCqw');
        const videoPlayer = document.getElementById('videoPlayerCqw');
        const videoHeight = videoContainer.offsetHeight;
        const videoOffsetTop = videoContainer.offsetTop;

        // 初始化变量
        let isThumbnail = false; // 当前是否为缩略图模式

        // 滚动事件监听
        window.addEventListener('scroll', () => {
            const scrollY = window.scrollY;

            // 判断视频是否完全滚出视口
            if (scrollY > videoOffsetTop + videoHeight) {
                if (!isThumbnail) {
                    // 切换到缩略图模式
                    isThumbnail = true;

                    // 使用 top 和 left 定位到右下角
                    const videoWidth = 320; // 缩略图宽度
                    const videoHeight = 180; // 缩略图高度
                    const viewportWidth = window.innerWidth; // 视口宽度
                    const viewportHeight = window.innerHeight; // 视口高度

                    videoPlayer.style.position = 'fixed';
                    videoPlayer.style.top = `${viewportHeight - videoHeight - 20}px`; // 距离底部 20px
                    videoPlayer.style.left = `${viewportWidth - videoWidth - 20}px`; // 距离右侧 20px
                    videoPlayer.style.width = `${videoWidth}px`;
                    videoPlayer.style.height = `${videoHeight}px`;
                    videoPlayer.style.border = '2px solid #fff';
                    videoPlayer.style.borderRadius = '8px';
                    videoPlayer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';

                }
            } else {
                if (isThumbnail) {
                    // 返回主视频模式
                    isThumbnail = false;
                    videoPlayer.style.position = 'absolute';
                    videoPlayer.style.bottom = '';
                    videoPlayer.style.right = '';
                    videoPlayer.style.top = '';
                    videoPlayer.style.left = '';
                    videoPlayer.style.width = '100%';
                    videoPlayer.style.height = '100%';
                    videoPlayer.style.border = 'none';
                    videoPlayer.style.borderRadius = '0';
                    videoPlayer.style.boxShadow = 'none';
                }
            }
        });
添加点击事件

点击缩略图时，让页面平滑滚动回到主视频位置：

videoPlayer.addEventListener('click', () => {
    if (isThumbnail) {
        window.scrollTo({
            top: videoOffsetTop,
            behavior: 'smooth',
        });
    }
});

三、完整代码展示

以下是完整实现代码，直接复制即可运行！

 

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单视频切换</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .content {
            padding: 20px;
            height: 2000px; /* 模拟长页面 */
        }

        /* 视频初始样式 */
        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 比例 */
            background: #000;
            overflow: hidden;
            z-index: 1000;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* 缩略图样式 */
        .video-thumbnail {
            display: none; /* 默认隐藏 */
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 320px; /* 缩略图大小 */
            height: 180px;
            border: 2px solid #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 2000;
            cursor: pointer; /* 鼠标指针 */
        }
    </style>
</head>
<body>
    <!-- 视频区域 -->
    <div class="video-container" id="videoContainer">
        <iframe 
            id="videoPlayer"
            src="//player.bilibili.com/player.html?isOutside=true&aid=497651138&bvid=BV1BK411L7DJ&cid=177974677&p=1" 
            frameborder="0" 
            scrolling="no" 
            allowfullscreen="true">
        </iframe>
    </div>

    <!-- 内容部分 -->
    <div class="content">
        <h1>优化滚动缩略图</h1>
        <p>滚动页面，视频完全离开视口后会以缩略图形式显示在右下角。</p>
        <p>点击缩略图，页面会回到主视频位置。</p>
        <p>模拟长内容...</p>
        <p>继续滚动测试...</p>
    </div>
<script>
        // 获取元素
        const videoContainer = document.getElementById('videoContainerCqw');
        const videoPlayer = document.getElementById('videoPlayerCqw');
        const videoHeight = videoContainer.offsetHeight;
        const videoOffsetTop = videoContainer.offsetTop;

        // 初始化变量
        let isThumbnail = false; // 当前是否为缩略图模式

        // 滚动事件监听
        window.addEventListener('scroll', () => {
            const scrollY = window.scrollY;

            // 判断视频是否完全滚出视口
            if (scrollY > videoOffsetTop + videoHeight) {
                if (!isThumbnail) {
                    // 切换到缩略图模式
                    isThumbnail = true;

                    // 使用 top 和 left 定位到右下角
                    const videoWidth = 320; // 缩略图宽度
                    const videoHeight = 180; // 缩略图高度
                    const viewportWidth = window.innerWidth; // 视口宽度
                    const viewportHeight = window.innerHeight; // 视口高度

                    videoPlayer.style.position = 'fixed';
                    videoPlayer.style.top = `${viewportHeight - videoHeight - 20}px`; // 距离底部 20px
                    videoPlayer.style.left = `${viewportWidth - videoWidth - 20}px`; // 距离右侧 20px
                    videoPlayer.style.width = `${videoWidth}px`;
                    videoPlayer.style.height = `${videoHeight}px`;
                    videoPlayer.style.border = '2px solid #fff';
                    videoPlayer.style.borderRadius = '8px';
                    videoPlayer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';

                }
            } else {
                if (isThumbnail) {
                    // 返回主视频模式
                    isThumbnail = false;
                    videoPlayer.style.position = 'absolute';
                    videoPlayer.style.bottom = '';
                    videoPlayer.style.right = '';
                    videoPlayer.style.top = '';
                    videoPlayer.style.left = '';
                    videoPlayer.style.width = '100%';
                    videoPlayer.style.height = '100%';
                    videoPlayer.style.border = 'none';
                    videoPlayer.style.borderRadius = '0';
                    videoPlayer.style.boxShadow = 'none';
                }
            }
        });

        // 点击缩略图返回主视频位置
        videoPlayer.addEventListener('click', () => {
            if (isThumbnail) {
                window.scrollTo({
                    top: videoOffsetTop,
                    behavior: 'smooth',
                });
            }
        });
    window.addEventListener('resize', () => {
    if (isThumbnail) {
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;

        videoPlayer.style.top = `${viewportHeight - videoHeight - 20}px`;
        videoPlayer.style.left = `${viewportWidth - videoWidth - 20}px`;
    }
});
</script>
</body>
</html>

四、总结与思考

这次我们实现了一个滚动页面时动态调整视频显示位置的小功能。通过 CSS 和 JavaScript 的组合，我们实现了以下目标：

  • 自动检测滚动，切换视频展示形式。

  • 视频缩略图在右下角悬浮显示，既优雅又实用。

  • 支持点击缩略图快速回到主视频位置。

扩展思路：

  • 增加一个关闭按钮来隐藏缩略图。

  • 实现自适应大小，支持移动端。

赶紧试试吧！如果有问题或更好的建议，欢迎在评论区交流～

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员小藕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值