企业官网建设流程全解析

• UI组件
• 前端

wired-video是 wired-elements 组件库中的视频播放器组件，它以手绘（hand-drawn / sketchy）风格的边框呈现视频画面，并内置了同样风格化的播放控制栏，非常适合在 wireframe（线框图）、原型演示或追求趣味视觉的页面中直接使用。阅读本文后，你将掌握wired-video的安装引入、全部属性配置、CSS 变量定制方法，并能从源码层面理解其"手绘边框 + 自绘进度条 + 音量滑杆"的完整实现原理。

组件概览

wired-video是一个基于 Lit 与 RoughJS 构建的自定义元素（Custom Element），对外暴露标签名<wired-video>。它包装了原生<video>元素，并在其上层叠加了：

• 手绘风格的矩形边框（由 RoughJS 随机抖动路径绘制）；
• 底部控制栏：进度条（wired-progress）、播放/暂停按钮（wired-icon-button）、时间显示、音量滑杆（wired-slider）与音量图标。

你可以在 docs/wired-video.md 查看官方简版文档，在 examples/video.html 查看可直接运行的演示页面。

安装与引入

通过 npm 安装

将 wired-elements 加入你的 JavaScript 项目：

npm i wired-elements

安装完成后，包内提供 ESM 构建产物，入口文件为lib/wired-elements.js（见 package.json），类型声明位于lib/wired-elements.d.ts。

在模块脚本中导入

按需导入WiredVideo类即可，两种写法等价：

import { WiredVideo } from 'wired-elements'; // 或按单组件文件导入 import { WiredVideo } from 'wired-elements/lib/wired-video.js';

其中WiredVideo类是组件的实际实现类（源码见 src/wired-video.ts），通过@customElement('wired-video')装饰器注册为自定义元素；它也被统一从 src/wired-elements.ts 的export * from './wired-video'中对外导出。若你引入的是整个组件库，页面中所有 wired 系列组件会一并注册。

直接通过 CDN 加载

不经过打包工具时，可把 ES Module 直接加载进 HTML 页面：

<script type="module" src="https://unpkg.com/wired-elements/lib/wired-video.js?module"></script>

基本用法

在 HTML 中直接书写自定义标签即可：

<wired-video autoplay muted loop src="video.mp4"></wired-video>

组件内部会创建一个原生<video>元素并将上述属性透传给它（见 src/wired-video.ts）。属性也可以按 Web Component 惯例用 JavaScript 动态设置，例如：

const video = document.querySelector('wired-video'); video.src = 'another.mp4'; video.muted = true;

属性（Properties）一览

wired-video对外暴露 5 个公开属性，均与原生<video>的对应能力一一映射：

源码中这些属性通过 lit 的@property装饰器声明（见 src/wired-video.ts）：

@property({ type: String }) src = ''; @property({ type: Boolean }) autoplay = false; @property({ type: Boolean }) loop = false; @property({ type: Boolean }) muted = false; @property({ type: Boolean }) playsinline = false;

在render()模板中，它们被绑定到内部<video>元素的对应属性上（.autoplay、.loop、.muted、.playsinline使用属性绑定语法，src直接作为属性输出），因此原生视频元素支持的播放策略行为都会正常生效。注意playsinline属性的 HTML 写法是小写整体，与组件属性名保持一致。

需要说明的是，autoplay的最终行为仍受浏览器自动播放策略约束（例如移动端通常要求静音后才允许自动播放），组件本身不绕过浏览器策略，建议在自动播放场景下配合muted一起使用，这也是 examples/video.html 中演示页面采用autoplay playsinline muted loop组合的原因。

控制栏与内置交互

wired-video自带一套完整的播放控制 UI，全部由 wired 系列组件拼装而成（见 src/wired-video.ts）：

• 进度条：<wired-progress>，显示当前播放进度（百分比 0～100）；
• 播放/暂停：<wired-icon-button>，内容在播放时为||、暂停时为▶；
• 时间显示：格式为分:秒，形如1:23 / 4:56（currentTime / duration）；
• 音量滑杆：<wired-slider>，范围 0～100，拖动即调整音量。

对应的事件与处理逻辑如下：

进度计算逻辑（见 src/wired-video.ts）：

private updateTime() { if (this.video && this.progressBar) { this.progressBar.value = this.video.duration ? Math.round((this.video.currentTime / this.video.duration) * 100) : 0; this.timeDisplay = `${this.getTimeDisplay(this.video.currentTime)} / ${this.getTimeDisplay(this.video.duration)}`; } }

播放/暂停与音量控制（见 src/wired-video.ts）：

private togglePause() { if (this.video) { if (this.playing) { this.video.pause(); } else { this.video.play(); } } } private volumeChange() { if (this.video && this.slider) { this.video.volume = this.slider.value / 100; } }

可以看出，音量滑杆的 0～100 数值会在volumeChange中换算为 0～1 的video.volume取值；反向地，canPlay在视频可播放时把当前音量回填到滑杆，保证 UI 与真实音量一致。

手绘边框的绘制原理

wired-video继承自WiredBase（src/wired-base.ts），这是 wired-elements 所有组件的公共基类，负责管理 SVG 画布、尺寸变化重绘与wired-rendered类切换（组件渲染完成后透明度从 0 变为 1）。

组件在draw()中绘制手绘矩形边框（见 src/wired-video.ts）：

protected draw(svg: SVGSVGElement, size: Point) { rectangle(svg, 2, 2, size[0] - 4, size[1] - 4, this.seed); }

其中rectangle是 src/wired-lib.ts 中导出的绘图工具函数，基于 RoughJS 生成带随机抖动的线条路径；this.seed是组件实例化时生成的随机种子（Math.floor(Math.random() * 2 ** 31)），因此每个实例的"手绘"笔迹都不尽相同，这正是 sketchy 视觉效果的来源。

此外，组件在构造时检测window.ResizeObserver，可用时用它监听自身尺寸变化并触发wiredRender()重绘，否则退化为监听window.resize事件（见 src/wired-video.ts、src/wired-video.ts），保证容器尺寸变化后手绘边框依然贴合视频画面。

CSS 自定义变量

组件通过一个 CSS 变量暴露主题色，控制进度条与音量滑杆旋钮的颜色：

在源码样式中，该变量被映射到内部两个子组件的主题色（见 src/wired-video.ts）：

:host { --wired-progress-color: var(--wired-video-highlight-color, rgb(51, 103, 214)); --wired-slider-knob-color: var(--wired-video-highlight-color, rgb(51, 103, 214)); }

• --wired-progress-color由 src/wired-progress.ts 读取，作为进度条填充路径（path.progbox）的描边颜色；
• --wired-slider-knob-color由 src/wired-slider.ts 中的滑块旋钮样式读取。

使用方式：在wired-video或其祖先元素上设置该变量即可，示例 examples/video.html 演示了通过类名覆盖主题色：

.pink { --wired-video-highlight-color: purple; }

<wired-video class="pink" src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"></wired-video>

运行examples/video.html后可以看到两个视频：一个使用默认蓝色高亮，另一个通过.pink类变为紫色高亮。

完整示例：在页面中接入

结合上述内容，一个完整的最小页面如下：

<!DOCTYPE html> <html> <head> <script type="module" src="https://unpkg.com/wired-elements/lib/wired-video.js?module"></script> <style> body { margin: 0; padding: 10px; font-family: sans-serif; line-height: 1.5; } .pink { --wired-video-highlight-color: purple; } </style> </head> <body> <wired-video autoplay playsinline muted loop src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"> </wired-video> <wired-video class="pink" src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"> </wired-video> </body> </html>

该示例与仓库内 examples/video.html 保持一致：第一个视频开启自动播放并静音循环，第二个视频由用户手动点击播放，两个视频分别展示默认与自定义高亮色的效果。

小结

wired-video把原生视频播放能力与 wired-elements 的"手绘"美学做了完整结合：通过 5 个与原生<video>一一对应的属性保持功能不缩水，同时用wired-progress、wired-slider、wired-icon-button拼装出风格统一的手绘控制栏，再以--wired-video-highlight-color一个变量完成主题配色。对于希望让视频播放器融入线框图或手绘风页面的开发者来说，这是一个开箱即用且可深度定制的选择。

组件源码位于 src/wired-video.ts，官方文档见 docs/wired-video.md，运行示例见 examples/video.html，其他组件的 API 说明可继续查阅 docs 目录。

License

本组件及 wired-elements 项目采用 MIT License，版权归作者 Preet Shihn 所有。

• UI组件
• 前端