WordPress 中插入 HTML5 视频的方法详解

作者:袖梨 2022-06-25

HTML5 是有 标签的,可以像以前用 标签插入图片一样来插入视频了。例如,





Your browser does not support the video tag. 您的浏览器不支持视频标签。

当然也可以这样,


Your browser does not support the video tag. 您的浏览器不支持视频标签。

真的是简单到无以复加。其中,

controls 属性为视频添加诸如播放、暂停和音量调节等基本控制功能。类似的属性还有 autoplay、muted、loop 等。
width 和 height 指定视频显示在网页中占的位置大小。
给出视频源文件,如果有多个则浏览器会选取最先遇到的、能支持的那个,或者直接在 中用 src 给出唯一一个视频源文件。
里除 外的那行字,只有当浏览器不支持这些标签的时候才会显示,让用户知道发生了什么情况。
还可以使用 poster 属性设置一张图片作为封面,


Your browser does not support the video tag. 您的浏览器不支持视频标签。

还可以使用 内嵌字幕的(详见这里),



Your browser does not support the video tag. 您的浏览器不支持视频标签。

现在所有的主流浏览器都支持这种标记,也基本都支持这几种视频格式。貌似也仅支持这几种视频格式,其中 Ogg 和 Google 推出的 WebM 这种格式的支持率可能要差些。详见这里。

然后就是如果有闲还可以利用 CSS 和 JavaScript 为之增加各种效果和功能,可以参考这里。WordPress 本身也很早就开始注意整合对音视频资源的支持了。

当然对音频的支持也不会缺,标签为 。不过好像这年头直接使用现有的音视频托管服务的才是大多数啊。自己托管音视频文件如果被盗链,那流量就太不值得了

相关文章

精彩推荐