wired-elements 中的 wired-video：手绘风格视频播放器组件实战指南

UI组件前端【免费下载链接】wired-elementsCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.项目地址https://gitcode.com/gh_mirrors/wi/wired-elements点击查看免费下载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 typemodule srchttps://unpkg.com/wired-elements/lib/wired-video.js?module/script基本用法在 HTML 中直接书写自定义标签即可wired-video autoplay muted loop srcvideo.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的对应能力一一映射属性类型默认值说明srcString视频文件的 URL直接赋给内部video的srcautoplayBooleanfalse是否自动播放loopBooleanfalse是否循环播放mutedBooleanfalse是否静音播放playsinlineBooleanfalse是否在移动端内联播放iOS Safari 等环境源码中这些属性通过 lit 的property装饰器声明见 src/wired-video.tsproperty({ 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显示当前播放进度百分比 0100播放/暂停wired-icon-button内容在播放时为||、暂停时为▶时间显示格式为分:秒形如1:23 / 4:56currentTime / duration音量滑杆wired-slider范围 0100拖动即调整音量。对应的事件与处理逻辑如下原生事件处理函数行为play内联赋值playing true更新播放按钮状态pause内联赋值playing false更新播放按钮状态canplaycanPlay()用当前音量01初始化滑杆值乘以 100timeupdateupdateTime()计算进度百分比并更新时间显示进度计算逻辑见 src/wired-video.tsprivate 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.tsprivate 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; } }可以看出音量滑杆的 0100 数值会在volumeChange中换算为 01 的video.volume取值反向地canPlay在视频可播放时把当前音量回填到滑杆保证 UI 与真实音量一致。手绘边框的绘制原理wired-video继承自WiredBasesrc/wired-base.ts这是 wired-elements 所有组件的公共基类负责管理 SVG 画布、尺寸变化重绘与wired-rendered类切换组件渲染完成后透明度从 0 变为 1。组件在draw()中绘制手绘矩形边框见 src/wired-video.tsprotected 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 变量暴露主题色控制进度条与音量滑杆旋钮的颜色变量说明默认值--wired-video-highlight-color进度条颜色与音量滑杆旋钮颜色rgb(51, 103, 214)蓝色在源码样式中该变量被映射到内部两个子组件的主题色见 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 classpink srchttps://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 typemodule srchttps://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 srchttps://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4 /wired-video wired-video classpink srchttps://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组件前端【免费下载链接】wired-elementsCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.项目地址https://gitcode.com/gh_mirrors/wi/wired-elements点击查看免费下载相关推荐Wired-Elements项目中的手绘风格列表组件wired-listbox详解Wired Elements项目中的手绘风格列表组件wired listbox详解 组件概述 wired listbox是Wired Elements项目提供的UI组件前端Wired Elements项目中的手绘风格组合框组件wired-combo详解Wired Elements项目中的手绘风格组合框组件wired combo详解 引言手绘UI的魅力与实用价值 在现代Web开发中用户界面的视觉表现越来越多UI组件前端GitHub_Trending/ma/machine-learning-for-trading中的无监督学习PCA与聚类分析GitHub_Trending/ma/machine learning for trading中的无监督学习PCA与聚类分析 在量化交易领域无监督学习技术能示例工程金融科技机器学习人工智能深度学习创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考