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

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

富文本编辑器

我们知道微信的编辑器是一个富文本编辑器,遵循所见即所得的原则,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,然后复制内容到微信公众号中,预览,发送即可。

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,081评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,269评论 4 61
  • 1、2、3、5… 我常在这里抽烟 看电梯上上下下 这里没有4楼、14楼和24楼 经过3楼时,停顿的时间会长一些 深...
    流水账专业撰稿人阅读 282评论 0 1
  • 昨天晚上妈妈做饭妈妈让我写日记,然后吃饭,我光贪玩儿了,没写,吃完晚饭,妈妈要用手机。妈妈说戴老师也给他留了作业,...
    小王子WXN阅读 351评论 1 3
  • 夫妻之间如果真心相爱,那么一定会心有灵犀的。那种爱的心灵感应已经根植于骨髓里了。今天早上梦见先生,在梦里还是那种很...
    小茉姐姐阅读 356评论 0 0