先给访客一个点击播放的理由。
假设一家家具店在销售伸缩餐桌。照片能展示木材和外形，而有用的视频回答的是另一个问题：桌子怎样打开，买家需要做什么？
选择能展示实际产品的预览图，并说明视频会演示什么。尺寸、价格和其他购买信息也要以文字提供。访客不该为了判断家里是否放得下这张桌子，被迫看完一段视频。
示意图：预览图介绍桌子，演示展示桌子如何展开。
阅读视频文字说明
让画面讲清 文字难以表达的事。 图片展示外形， 动作展示功能。
展示变化。 让动作把过程讲清楚。 将桌面向两侧拉开。 放入加长板，展示结果。 同一张桌子， 更多空间。
看清细节。 一个小细节， 就能让人看懂。 锁扣 扣紧了。 把视线引向关键之处。
给出观看的理由。 一开始就让观众知道 看完能得到什么。 明确的结果， 让动作有了方向。 这样就能增加空间。
没有声音也能看懂。 让重点清晰可见。 将桌面向两侧拉开。 放入加长板。 使用前扣紧锁扣。
当视频能讲得更清楚时，再用视频。 展示变化。 看清细节。 讲清重点。
先找出等待从哪里开始。
页面加载慢，与点击后视频迟迟不播放，需要分别检查。用同一部手机、同一网络测试，并保持页面其他内容可见。
点击播放之前
对于由访客选择观看的演示，使用尺寸合适的预览图，避免在需要之前下载整段视频。点击后再加载播放器的预览，也可以推迟加载较重的第三方播放器。检查实际网络请求：预加载设置只是提示，不能保证浏览器一定按提示下载。参见 web.dev 的视频加载指南。
点击播放之后
检查多久才出现第一幅运动画面，然后观察是否卡顿、细节模糊或控件难用。减少不必要的数据，但保留视频要展示的动作和产品细节。为视频预留空间，避免开始播放时挤动周围的信息。
把容易漏看的那一步展示出来。
在这个虚构的餐桌示例中，锁扣位于桌沿下方。远景可能恰好遮住客户需要看的部分。切换到特写，清楚展示动作，并让镜头停留足够长的时间，便于观众跟上。
为口头说明提供准确、同步的字幕，也要解释关键的视觉步骤。“滑动桌沿下方的锁扣”比“把这个移一下”更明确。根据内容，这类说明可能还需要以语音提供。检查键盘操作、暂停和字幕控件。可参考 W3C 的无障碍媒体指南，判断视频需要哪些支持。
示意图：特写让锁扣的位置和移动方式清楚可见。
根据视频要完成的任务选择方案。
应该自己托管视频文件吗？
视频服务可以处理分发并提供实用的播放功能，但嵌入播放器也可能增加下载和脚本。直接提供视频文件，可以自行控制页面呈现，同时也要负责合适的文件、字幕和控件。比较所需功能，再测量不同方案的实际表现。
文件变小就能解决问题吗？
如果问题来自视频数据量过大，缩小文件可能有帮助。但它不能修复含糊的预览、缺失的字幕或难用的播放器。过大的预览图可能拖慢首屏，嵌入播放器可能增加脚本或引起布局移动。先查明原因，再决定是否更换播放器或重新压缩文件。
怎样判断修改是否有效？
修改前后重复相同任务，比较页面加载、点击播放后的等待、播放中断，以及手机上能看到的细节。再请一位不了解产品的人解释演示中的步骤。播放流畅只有在观众看懂时才真正有用。