教你如何在公众号图文视频上添加悬浮文字

公众号里的图文消息如果插入腾讯视频,是必须在正文中加入文字的。而有些公众号发布的图文消息,正文只有视频,上面有一行文字,点击播放就没有了,参考下图,那么这种效果如何实现呢?本文给出了相关原理和具体的实现步骤。

文/莉莉妮特(简书作者)
原文链接:http://www.jianshu.com/p/2c609946c89e

公众号里的图文消息如果插入腾讯视频,是必须在正文中加入文字的。而有些公众号发布的图文消息,正文只有视频,上面有一行文字,点击播放就没有了,参考下图,那么这种效果如何实现呢?本文给出了相关原理和具体的实现步骤。

富文本编辑器

我们知道微信的编辑器是一个富文本编辑器,遵循所见即所得的原则,What You See Is What You Get,简称WYSIWYG。

当然这是一个比较轻量的富文本编辑器,基本能满足微信平台的使用,诸如知乎、简书这样的平台编辑器更加轻量,当然它们不一定是富文本,也可能是markdown编辑器。类似UEditor 这样的富文本编辑器功能更加完善,比较适合在后台用来编辑文章。

135编辑器

微信自己的编辑器很难实现精美的边框和布局,好在现在第三方编辑器非常多,我用的比较多是135编辑器,功能比较全,模板也很多。

使用编辑器自带的『源代码』按钮我们可以看到,精美的图文布局本质上其实就是文字+样式,也就是我们经常能听到html+css。具体的语法我们不需要掌握,知道这个基础概念就可以了。

随便找一个有这种视频的图文消息链接,在PC上打开。crtl+u或者右键查看源代码,查找视频上的文本,可以清楚地看到这个内容是通过html和css实现的。

微小宝

既然已经知道这种效果的添加原理,那么我们在较为高级的富文本编辑器中获得这段代码就可以了。可惜135编辑器导入文章的功能是需要付费使用的,只能另想它法了。

微小宝是一个免费的公众号运营助手,这里就可以派上用途了。在查找并关注公众号后,我们可以选择历史图文新建图文消息,然后编辑图文就可以看到带有视频图文信息的源代码。

这段代码要修改的只有一个地方,也就是腾讯视频的id。我随机在腾信视频上找了几个视频,url的组成不同,但是url中最后10位的字符串才是我们真正需要的,在编辑中替换即可,预览时也可以看到腾讯视频的内容。

(1)在微小宝中编辑代码,然后进入普通模式把这段视频样式复制到公众号中,或者利用平台自带的同步功能一键同步到公众号中去。

(2)在135编辑器编辑代码,然后进入普通模式把这段视频样式复制到公众号中。毕竟135编辑器的编辑功能相对前者要相对强大一点。

两种方法随便选择一个,上面的这个步骤是最为重要的一步,建议在谷歌浏览器下操作完成,其他浏览器可能会出现不兼容的现象,效果不是很好。

针对这段代码可以复制在笔记中保存,方便下次使用。

总结方法如下

在135等富文本编辑器中直接粘贴复制保存过的代码,替换腾讯视频的id,然后复制内容到微信公众号中,预览,发送即可。

下面放一个这样的视频效果吧,『四美不开心』,让你笑一下。

以后也会不定期更新一些这样的使用技巧和经验的,欢迎交流哦。

 

本文由 微营销手册 作者:莉莉妮特 发表,其版权均为 微营销手册 所有,文章内容系作者个人观点,不代表 微营销手册 对观点赞同或支持。如需转载,请注明文章来源。
79

发表评论