干货:WordPress中如何插入HTML5视频教程

今天公司网站要插入一个视频,公司介绍视频,折腾了好久都不识别视频标签,后来突然想到,这已经是html5了,尝试放一个html5标签试试,结果真的好用了,简介大方高大上!

wordpress安装主题插件失败提示“Not Found nginx/1.15.11”

这个问题主要是由于wordpress的固定链接导致的,调一下固定链接就可以了。方法:设置-固定链接,设置为如下:

今天公司网站要插入一个视频,公司介绍视频,折腾了好久都不识别视频标签,后来突然想到,这已经是html5了,尝试放一个html5标签试试,结果真的好用了,简介大方高大上!接下来是我的记录:

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>。

但是有个问题需要注意,就是如果这个视频或者音频是公共的,别人也是可以拿来用的,除非你有防盗链功能。否则被别人用了之后,会占用服务器的带宽。

WordPress插入文章函数之wp_insert_post详解

【描述】该函数可在数据库中插入文章(及页面)。它可以进行处理变量,检查操作,填充日期/时间等缺失变量等工作。该函数以对象作为变量,返回已创建文章的编号(出错时返回0)。【使用方法】 <?php wp_insert_post( $post, $wp_err…

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论