piapia123
zh

HTML5 video 标签生成

网络

所有处理都在浏览器本地完成，数据不上传服务器

输入
把文件拖到这里可直接载入
输出

一段能用的 `<video>` 不止 `src` 一个属性。这个工具把多格式 `<source>`（同一个视频备 mp4 / webm 两份，让浏览器挑它能放的）、`poster` 封面、`<track>` 字幕、`preload` 预加载与各种开关拼成一段可以直接粘的标签，并逐条说明每个属性的作用。特别地，勾了 `autoplay` 却没勾 `muted` 时会给出警告 —— 现代浏览器禁止带声音的自动播放，这样的标签看起来没问题，实际上多半不会动。

功能

  • 一行一个视频地址，多行自动变成多个 <source>
  • 按扩展名推出 type（video/mp4、video/webm 等）
  • 宽度 / 高度可选，留 0 则布局自适应
  • 封面图（poster）与字幕轨（track）
  • preload 三档：none / metadata / auto
  • controls / loop / playsinline 等开关
  • ⚠️ autoplay 没配 muted 时警告会被浏览器拦掉
  • 属性值里的引号自动转义，不会提前闭合标签

使用方法

  1. 一行一个视频地址（多种格式就写多行）
  2. 按需调宽度、封面、preload 与开关
  3. 要字幕就勾上并填字幕文件 URL 与语言
  4. 复制生成的标签粘进页面

常见问题

为什么勾了 autoplay 还是不会自动播放？
现代浏览器都禁止带声音的自动播放。想让 `autoplay` 生效，几乎一定要同时加 `muted`（默认静音），用户再手动开声音。工具在「autoplay 开、muted 关」时会提醒你这一点，免得生成一段不会动的标签。
为什么要写多个 <source>？
不同浏览器支持的编码不同（Safari 偏爱 mp4，Chrome / Firefox 也认 webm）。给同一个视频备两种格式，浏览器会挑它能放的第一个，兼容面更广。多行输入就是多个 `<source>`。
type 是怎么来的？
按地址的扩展名推出来的（`.mp4 → video/mp4`、`.webm → video/webm` 等）。认不出的扩展名会省略 `type`，让浏览器自己判断，而不是硬编一个可能是错的。

相关工具

音乐播放器

网络

把几行音频地址生成一个自包含的播放器：原生 audio 播放条加播放列表，无依赖、无需构建，粘进页面就能用。

弹窗代码

网络

生成 window.open 弹窗代码或 target="_blank" 链接，参数可调，并说明哪些参数现代浏览器已经忽略、noopener 会带来什么取舍。

HTML 转 JS

网络

把一段 HTML 转义成 JS 字符串（含 `</script>` 打断、引号与换行处理），反向也能把转义字符串还原成 HTML。全部在浏览器本地完成。

URL 解析

网络

在线 URL 解析：拆出协议、主机、端口、路径、查询参数与锚点，参数逐个解码并与原始值对照，缺协议自动补 https://。全部在浏览器本地完成。

UA 解析

网络

在线 User-Agent 解析：识别浏览器、版本、操作系统、设备类型与渲染引擎，并列出命中的匹配规则。结果基于模式匹配，仅供参考。全部在浏览器本地完成。

HTTP 状态码

网络

HTTP 状态码查询与速查：输入编号查含义、1xx 到 5xx 分类、常见场景与排查提示，也能用关键词反查编号。全部在浏览器本地完成。

← 返回全部工具