“在图文里播放音频,可以去掉音频的悬浮窗吗?”

原创 收藏 评论
举报 2024-07-15



点击图片,播放音频。
这种效果大家很常见了。相比于直接点击播放音频卡片,在长图排版中这种播放音频的方式显然更好一些。
不过不少追求完美的小伙伴,还是觉得点击后弹出的小悬浮窗会影响沉浸阅读的效果。如下:




那么,如何将音频的悬浮弹窗去掉呢?
或许,我们可以换种音频上传的方式。把要播放的音频以视频的形式上传,然后隐藏在图片之下,音频的悬浮窗自然就没有啦。


先带大家通过案例一起来体验下:

 1.gif             

*素材来自石头科技roborock《黑科技!会「伸手」 的 P10 Pro 来了!

组件:点击切换图片+播放音频(以视频方式上传)

编号:11354(组件)

2.gif

*素材来自大众汽车《夏日趣放送丨随耳朵趣逐浪

组件:点击切换图片+播放音频(以视频方式上传)

编号:11354(组件)


这2个案例用到的效果就是使用 iPaiban Pro 黑科技编辑器里的「点击切换图片+播放音频(以视频方式上传)」组件(编号11354)制作的。

相比纯音频,以视频方式上传的支持直接转载点击播放时不会弹出悬浮弹窗,更方便干净。
下面以案例1为例,来看看是如何制作的吧。


详细教程:

工具:iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com

组件:点击切换图片+播放音频(以视频方式上传)

编号:11354(组件)
第1步:选择组件
登录 iPaiban Pro 编辑器后,点击编辑器右侧「组件」按钮,在「音频」-「视频式音频」分类中找到「点击切换图片+播放音频(以视频方式上传) 」组件,或者直接在搜索框中搜索组合编号11354,点击选择。



第2步:上传图片
点击右侧换图上传点击前和点击后的图片,若图片上传错误,还可点击换图进行调整。

第3步:调整触发区域
拖拽红色区域调整触发区域的位置。为了防止点击触发时有问题,这里限制触发区域的大小不可调整,只能调整位置。



第4步:输入视频id
①在公众号后台新建图文,将要使用的视频插入。


②点击页面右上角 iPaiban Pro 小助手插件(安装和详细使用教程),选择「本地视频」提取id。


③复制提取到的视频id,返回到编辑器中,粘贴在指定位置。





第5步:导入公众号后台
该效果不支持在编辑器预览。点击「同步至微信后台」等待同步成功,然后扫码预览效果即可。


使用同步功能无需频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码查看。

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)