为什么不直接用原生 video 标签?

用普通 HTML video 标签加 MP4 播放十秒的循环短片没问题,但很快就会行不通。大文件在慢速网络下会卡顿,各浏览器支持的格式不一,而且每次有人点击播放,你自己的网站主机都要为流量付费。嵌入式播放器则完全相反:文件存放在 FileHost.net,视频流会根据观众的网络自动调整,你的页面只需包含一个小小的 iframe。

播放器实际包含的功能

播放基于 Video.js 播放器,采用 HLS 流媒体。观众可使用全屏、倍速菜单、播放、快进快退、音量、静音和全屏的键盘快捷键、可调暗页面的影院模式,以及上传后自动生成的时间轴悬停缩略图。字幕可以 SRT 文件形式添加,支持 45 种语言,如果你愿意,播放器还可以默认开启某条字幕轨道。

所有者可以设置嵌入宽度和高度、添加自己的徽标、选择启动画面或封面图,高级版还可更改播放器颜色以匹配网站风格。高级用户可以在后台连接 VAST 广告标签或弹窗设置。

播放器功能

以下内容均对照播放器代码核实,不是愿望清单。

HLS 流媒体

分段传输让播放快速启动、拖动流畅,即使是长视频也一样。

字幕

可按语言加载 SRT 字幕轨道,在播放器中随时开启,也可默认开启字幕。

倍速与快捷键

倍速菜单和键盘控制涵盖播放、快进快退、音量、静音、全屏和影院模式。

影院模式

调暗周围页面,让视频成为焦点,再按一个键即可切换回来。

时间轴预览

悬停缩略图在处理视频时生成,观众无需盲目拖动就能找到想看的片段。

品牌定制

可添加徽标、选择封面、设置嵌入尺寸,高级版还能自定义播放器颜色。

五步嵌入视频

  1. 1上传视频,并等待它在视频列表中显示为就绪。
  2. 2打开视频并选择嵌入标签页。默认代码是一个 600 x 480 像素的 iframe,你可以调整其大小。
  3. 3复制代码,粘贴到页面的 HTML 视图,或编辑器中的自定义 HTML 区块。
  4. 4将 iframe 包裹在 16:9 比例的容器中即可实现自适应,大多数主题已自带此容器。
  5. 5发布前,在手机和电脑上用无痕窗口打开页面,确认播放和尺寸正常。

嵌入代码

基础 iframe

这是仪表盘生成的代码结构。请将代码替换为你自己视频的公开 ID。

<iframe width="600" height="480" src="https://filehost.net/e/YOUR_CODE" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>

自适应容器

一个小容器即可在任何屏幕宽度下保持 16:9 比例。将其添加到样式表中,并在里面使用同样的 iframe。

<div style="position:relative;aspect-ratio:16/9;max-width:100%">
  <iframe src="https://filehost.net/e/YOUR_CODE"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    allowfullscreen="true"></iframe>
</div>

性能与 SEO 注意事项

iframe 与你自己的脚本相互隔离,不会拖慢页面布局,也不会与主题冲突,但搜索引擎会将视频视为属于被嵌入的地址。请在你自己的页面上配上描述性标题、简短文字摘要和文字稿,让内容仍能获得排名。当视频位于首屏下方时,请为 iframe 添加设为 lazy 的 loading 属性。

由于繁重的处理工作都在别处完成,流量激增时你的主机费用也不会上涨。这对使用共享主机的小型网站来说是最实际的好处。

嵌入播放量变现

通过嵌入播放器产生的播放量与观看页按相同费率计入收益,一篇热门文章就能自负盈亏。你还可以在播放器内投放自己的 VAST 广告;投放自有广告期间产生的流量来自高级版流量,固定价格为每 TB 2 美元。在据此制定商业计划之前,请先阅读收益规则。

故障排查

如果播放器显示为空白框,请检查你的页面是否通过内容安全策略屏蔽了第三方框架。如果字幕没有出现,请确认字幕轨道已添加到正确的视频,并且是 SRT 格式。如果页面在手机上显示异常,请用上面的自适应容器替换固定的宽度和高度。

FileHost.net 对比情况

从网盘类服务嵌入,往往只有笨拙的预览框。看看各播放器有何不同。

查看所有对比

相关工具和指南

准备试试吗?

上传一段视频,复制 iframe 并粘贴到测试页面。五分钟内你就能判断这个播放器是否适合你的网站。

常见问题

上传视频,打开其嵌入标签页,复制 iframe 代码并粘贴到页面 HTML 中。

支持。可添加 45 种语言的 SRT 文件,观众可在播放器中自行开启。

可以。在代码中设置宽度和高度,或使用自适应容器让它随页面缩放。

你可以添加自己的徽标。自定义播放器颜色属于高级版功能,使用高级版流量还可去除广告或徽标。

会。嵌入视频的播放量与观看页的播放量按相同费率计算。