正确加载短视频需组合autoplay、muted、playsinline、preload="metadata"及显式<source type="video/mp4">；分享应分层降级：优先navigator.share()，不支持则用clipboard.writeText()或execCommand('copy')，微信卡片需JS-SDK配合updateAppMessageShareData。
HTML 本身不能播放短视频，更无法直接实现“分享”逻辑——所谓“HTML短视频分享面板”，本质是用 <video> 标签嵌入视频，再配合 JavaScript 实现复制链接、调起分享 API 或生成分享卡片等行为。
怎么用 <video> 正确加载并展示短视频
很多新手把 MP4 文件丢进 src 就以为完事了，结果在 iOS 或部分安卓浏览器里黑屏、不自动播放、没声音。关键不是 HTML 写得对不对，而是属性组合是否符合平台策略：
-
autoplay必须搭配muted（静音），否则 Chrome/iOS Safari 会阻止自动播放 -
playsinline是 iOS 全屏播放的开关，不加会导致视频点开就跳转全屏（对“面板”体验破坏极大） -
preload="metadata"比"auto"更省流量，只预加载时长、封面等信息，适合列表式短视频面板 - 推荐用
<source>显式声明type="video/mp4"，避免 MIME 类型协商失败
示例片段：
<video controls muted autoplay playsinline preload="metadata"> <source src="clip.mp4" type="video/mp4"> </video>
点击“分享”按钮后，该调 navigator.share() 还是自己写复制逻辑？
navigator.share() 看起来最“原生”，但实际兼容性极差：iOS Safari 完全不支持，旧版 Chrome/Edge 也不行；而且它要求页面必须是 HTTPS + 用户手势触发（比如 click），稍有延迟或异步就会报 NotAllowedError。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是分层降级：
- 先
if ('share' in navigator)检测原生支持 → 调用navigator.share({title, text, url}) - 不支持时，退回到“复制链接到剪贴板”：
navigator.clipboard.writeText(window.location.href) - 若
clipboard也失败（比如非安全上下文 HTTP 页面），就 fallback 到document.execCommand('copy')（已废弃但仍有兼容价值）
注意：window.location.href 不一定适合分享——如果页面带 hash 或 query 参数（如 ?ref=feed），要提前清理，否则分享出去的链接可能失效或带脏参数。
为什么分享卡片在微信里不显示封面和标题？
微信内置浏览器（X5 内核）不读取 Open Graph 标签，它只认自己的 meta 标签。光写 <meta property="og:title" content="..."> 没用。
必须同时加这三组：
-
<meta name="twitter:title" content="...">（Twitter 兼容） -
<meta property="og:image" content="https://.../cover.jpg">（注意必须是 HTTPS 绝对路径，且图片尺寸建议 ≥ 300×300） -
<meta name="wx-open-graph" content="...">（微信私有标签，但实际效果有限；真正起作用的是微信 JS-SDK 的updateAppMessageShareData）
也就是说：纯静态 HTML 页面，无法可靠控制微信分享卡片。真要稳定展示封面和描述，必须接入微信 JS-SDK，并在用户点击分享前调用对应接口——而这需要后端配置 valid domain 和签名服务。
别被“HTML 分享面板”这种说法带偏：视频加载靠 <video> 属性组合，分享行为靠 JavaScript 降级处理，社交卡片则基本绕不开平台 SDK。最容易被忽略的，是分享链接的语义纯净性——一个带临时参数、未做 URL 编码、甚至指向内网地址的 href，复制出去就是无效链接。
