ThinkPHP视频懒加载实现方法-优化页面加载性能

在 ThinkPHP 框架中实现视频懒加载功能，可以通过结合前端技术（如 HTML5、JavaScript）和后端逻辑来实现。懒加载的核心思想是延迟加载视频资源，直到用户需要查看视频时才加载，从而优化页面加载性能。以下是实现视频懒加载的详细步骤：

1. 前端实现视频懒加载

懒加载的关键在于前端，通过监听用户的滚动行为或视频进入视口的事件，动态加载视频资源。

HTML 结构

使用 data-src 属性存储视频的真实路径，初始时 src 属性为空或指向占位内容（如一张图片或低分辨率视频）。

<video 
    class="lazy-video" 
    width="640" 
    height="360" 
    controls 
    data-src="path/to/real-video.mp4" 
    poster="path/to/placeholder.jpg">
    Your browser does not support the video tag.
</video>

data-src：存储真实的视频路径。
poster：设置视频加载前的占位图。

JavaScript 实现懒加载

通过 JavaScript 监听视频元素进入视口的事件，将 data-src 的值赋给 src，从而触发视频加载。

document.addEventListener("DOMContentLoaded", function () {
    const lazyVideos = document.querySelectorAll(".lazy-video");

    const lazyLoad = function () {
        lazyVideos.forEach((video) => {
            if (video.getAttribute("data-src") && isInViewport(video)) {
                video.src = video.getAttribute("data-src");
                video.removeAttribute("data-src"); // 加载后移除 data-src
            }
        });
    };

    const isInViewport = (element) => {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    };

    // 初次加载检查
    lazyLoad();

    // 滚动事件监听
    window.addEventListener("scroll", lazyLoad);

    // 可选：Resize 事件监听（如果页面布局会动态变化）
    window.addEventListener("resize", lazyLoad);
});

核心逻辑：
- 使用 getBoundingClientRect() 判断视频是否进入视口。
- 如果视频进入视口，将 data-src 的值赋给 src，并移除 data-src 属性。

2. 后端配合（ThinkPHP）

后端主要负责提供视频资源接口，确保视频路径正确，并可以根据需求实现权限验证或动态生成视频路径。

示例：动态生成视频路径

如果视频路径需要动态生成（如根据用户权限或视频 ID），可以在 ThinkPHP 控制器中处理：

namespace app\controller;

use think\facade\View;

class VideoController
{
    public function index()
    {
        // 假设从数据库获取视频信息
        $videoData = [
            ['id' => 1, 'path' => '/uploads/videos/video1.mp4'],
            ['id' => 2, 'path' => '/uploads/videos/video2.mp4'],
        ];

        // 渲染到前端
        return View::fetch('video_list', ['videos' => $videoData]);
    }
}

前端模板渲染

在 ThinkPHP 的模板文件中，动态生成视频 HTML：

{volist name="videos" id="video"}
<video 
    class="lazy-video" 
    width="640" 
    height="360" 
    controls 
    data-src="{$video.path}" 
    poster="/path/to/placeholder.jpg">
    Your browser does not support the video tag.
</video>
{/volist}

3. 优化建议

占位图优化：使用低分辨率的图片或静态视频作为占位内容，提升用户体验。

Intersection Observer API：替代 scroll 事件监听，性能更优。

示例代码：

const lazyVideos = document.querySelectorAll(".lazy-video");

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const video = entry.target;
            video.src = video.getAttribute("data-src");
            video.removeAttribute("data-src");
            observer.unobserve(video); // 停止观察已加载的视频
        }
    });
});

lazyVideos.forEach(video => {
    observer.observe(video);
});