按自己的节奏看视频，看清图片细节
作者：toewpq约 1 分钟阅读更新于 最近一次变动
修改前
按自己的节奏看视频，看清图片细节<img src="/edgepress/revisions/image.51e291e65dc6b9c5.gif" alt="按自己的节奏看视频，看清图片细节" loading="lazy" width="640" height="400" />
修改后
按自己的节奏看视频，看清图片细节<img src="/edgepress/revisions/image.da5382978c5b7462.gif" alt="按自己的节奏看视频，看清图片细节" loading="lazy" width="640" height="400" />
修改前
Plyr 与 hls.js 本地打包，画廊只挂载选中的附件，切换时释放之前的播放。接入网站提供资源地址、同意设置与主题配色，组件本身不负责发表或存储。
修改后
Video.js 10 HTML 组件与 hls.js 本地打包，画廊只挂载选中的附件，切换时释放之前的播放。接入网站提供资源地址、同意设置与主题配色，组件本身不负责发表或存储。
进度条独立一行，当前时间与总时长放在一起。拖动跳到实际播放位置。演示会停留显示跳转后的时间，以及已选中的 2 倍速，让播放变化看得清楚。
按自己的节奏看视频，看清图片细节<img src="/images/previews/media-videojs10.da5382978c5b7462.gif" alt="按自己的节奏看视频，看清图片细节" width="640" height="400" />
需要细节时，再打开原图
卡片和帖子先请求优化预览，点击详情图后才打开完整原图。可以放大、拖动查看，关闭叉号位于图片之外，返回后焦点回到原来的图片。
组件负责交互，网站负责内容
Video.js 10 HTML 组件与 hls.js 本地打包，画廊只挂载选中的附件，切换时释放之前的播放。接入网站提供资源地址、同意设置与主题配色，组件本身不负责发表或存储。