WordPress 中插入 HTML5 视频

好久没有折腾 WordPress 网站的功能了。突然发现进入 HTML5 的时代真的是方便了很多,在 WordPress 博文中加入视频居然可以如此之简单。插件什么的真的需要吗?!

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

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.webm" type="video/webm">
    Your browser does not support the video tag. 您的浏览器不支持视频标签。
</video>

当然也可以这样,

<video src="movie.mp4" type="video/mp4" width="640" height="360" controls>
    Your browser does not support the video tag. 您的浏览器不支持视频标签。
</video>

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

  • controls 属性为视频添加诸如播放、暂停和音量调节等基本控制功能。类似的属性还有 autoplay、muted、loop 等
  • width 和 height 指定视频显示在网页中占的位置大小。
  • <source> 给出视频源文件,如果有多个则浏览器会选取最先遇到的、能支持的那个,或者直接在 <video> 中用 src 给出唯一一个视频源文件。
  • <video></video> 里除 <source> 外的那行字,只有当浏览器不支持这些标签的时候才会显示,让用户知道发生了什么情况。
  • 还可以使用 poster 属性设置一张图片作为封面,
    <video src="movie.mp4" type="video/mp4" poster="url-to-cover.png" width="640" height="360" controls>
        Your browser does not support the video tag. 您的浏览器不支持视频标签。
    </video>
  • 还可以使用 <track> 内嵌字幕的(详见这里),
    <video width="640" height="360" controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitle_en.vtt" kind="subtitles" srclang="en" label="English">
        Your browser does not support the video tag. 您的浏览器不支持视频标签。
    </video>

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

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

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

本文发表于水景一页。永久链接:<https://cnzhx.net/blog/wordpress-html5-video/>。转载请保留此信息及相应链接。

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>