视频加载Loading指令：基于Element Plus的优雅封装

今天没什么空，搞个简单点的，分享一个实用的自定义指令------v-video-loading。这个指令可以在视频加载和缓冲时自动显示loading状态，提升用户体验。

指令功能概述

v-video-loading指令的主要功能是：

自动监听视频元素的加载和播放状态
在视频加载或缓冲时显示loading动画
在视频开始播放或出错时隐藏loading
支持自定义loading配置选项

核心实现思路

1. 指令结构

javascript 复制代码

export const videoLoadingDirective = {
    mounted(el, {value}) {
        // 初始化逻辑
    },
    unmounted(el) {
        // 清理逻辑
    }
}

2. 事件监听机制

指令通过监听video元素的多个事件来实现状态判断：

javascript 复制代码

const VIDEO_EVENTS = ["loadstart", "loadeddata", "playing", "waiting", "error"]

loadstart：开始加载视频时显示loading
waiting：视频缓冲时显示loading
loadeddata/playing：视频可播放或播放时隐藏loading
error：视频加载出错时隐藏loading

3. Loading控制逻辑

javascript 复制代码

const showLoading = () => {
    if (!ctx.loadingInstance) {
        ctx.loadingInstance = ElLoading.service({
            target: el,
            background: "rgba(0, 0, 0, 0.8)",
            ...loadingOptions
        })
    }
}

const hideLoading = () => {
    if (ctx.loadingInstance) {
        ctx.loadingInstance.close()
        ctx.loadingInstance = null
    }
}

4. 内存管理

为了避免内存泄漏，指令在unmounted生命周期中清理所有事件监听器和loading实例：

javascript 复制代码

unmounted(el) {
    const ctx = el._videoLoadingContext
    // 移除所有事件监听
    VIDEO_EVENTS.forEach((eventName) => {
        const handler = ctx.eventHandlers.get(eventName)
        video.removeEventListener(eventName, handler)
    })
    // 关闭loading实例
    if (ctx.loadingInstance) {
        ctx.loadingInstance.close()
    }
}

5. 完整代码

javascript 复制代码

/**
 *  注意：使用v-video-loading时请留意并确认定位与层级
 *  使用方法：使用一个携带指令的div元素包裹一个video标签即可，div元素就是loading所在的位置
 */
import { ElLoading } from "element-plus"

const VIDEO_EVENTS = ["loadstart", "loadeddata", "playing", "waiting", "error"]
export const videoLoadingDirective = {
    mounted(el, {value}) {
        const { loadingOptions = {} } = value || {}
        const video = el.querySelector("video")
        const ctx = {
            loadingInstance: null,           // loading实例
            eventHandlers: new Map()         // 事件处理函数
        }

        const showLoading = () => {
            if (!ctx.loadingInstance) {
                ctx.loadingInstance = ElLoading.service({
                    target: el,
                    background: "rgba(0, 0, 0, 0.8)",
                    ...loadingOptions
                })
            }
        }

        const hideLoading = () => {
            if (ctx.loadingInstance) {
                ctx.loadingInstance.close()
                ctx.loadingInstance = null
            }
        }

        // 只有加载和缓冲时会loading
        const handleEvent = (e) => {
            switch (e.type) {
                case "loadstart":
                case "waiting":
                    showLoading()
                    break
                case "loadeddata":
                case "playing":
                case "error":
                    hideLoading()
                    break
            }
        }

        VIDEO_EVENTS.forEach((eventName) => {
            const handler = handleEvent.bind(null)
            ctx.eventHandlers.set(eventName, handler)
            video.addEventListener(eventName, handler)
        })

        el._videoLoadingContext = ctx
    },

    unmounted(el) {
        const ctx = el._videoLoadingContext
        if (!ctx) return

        const video = el.querySelector("video")

        VIDEO_EVENTS.forEach((eventName) => {
            const handler = ctx.eventHandlers.get(eventName)
            video.removeEventListener(eventName, handler)
        })

        if (ctx.loadingInstance) {
            ctx.loadingInstance.close()
        }

        delete el._videoLoadingContext
    }
}

export default {
    install(app) {
        app.directive("video-loading", videoLoadingDirective)
    }
}

使用方法

安装指令

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import videoLoadingDirective from './directives/videoLoading'

const app = createApp(App)
app.use(videoLoadingDirective)
app.mount('#app')

在组件中使用

html 复制代码

<template>
  <div v-video-loading="{ loadingOptions: { text: '加载中...' } }" class="video-container">
    <video controls src="your-video-source.mp4"></video>
  </div>
</template>

<style>
.video-container {
  position: relative;
  width: 640px;
  height: 360px;
}
</style>

注意事项

定位与层级：使用此指令时需要确保包裹video的容器有适当的定位(position)设置，以便loading组件能正确定位
性能考虑：事件监听器在组件销毁时会被正确清理，无需担心内存泄漏
自定义配置：可以通过loadingOptions参数自定义Element Plus Loading组件的所有选项

总结

这个简单的指令封装了视频加载状态管理的通用逻辑，通过 Vue 自定义指令的方式实现了关注点分离，让视频加载状态管理变得简单而优雅。在实际项目中，这种小工具能显著提升开发效率和用户体验。

如果你有更复杂的需求，可以考虑扩展这个指令，比如添加重试机制、超时处理等功能。