聚焦SVG排版技巧与创意应用的实用手册合集A collection of practical manuals focusing on SVG typesetting techniques and creative applications
组件教程“在图文里播放音频,可以去掉音频的悬浮窗吗?”
“在图文里播放音频,可以去掉音频的悬浮窗吗?”2024-07-11 09:00

 

                                               


点击图片,播放音频。

这种效果大家很常见了。相比于直接点击播放音频卡片,在长图排版中这种播放音频的方式显然更好一些。

不过不少追求完美的小伙伴,还是觉得点击后弹出的小悬浮窗会影响沉浸阅读的效果。如下:


那么,如何将音频的悬浮弹窗去掉呢?

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


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

 

                       




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

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

编号:11354(组件)


 

                       



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

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

编号: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步:导入公众号后台

该效果不支持在编辑器预览。点击同步至微信后台等待同步成功,然后扫码预览效果即可。


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

如需局部导入可参考:《iPaiban Pro小助手安装和使用教程》



制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。



SVG 黑科技交互排版👇🏻

 

                                               
                                               
                                               

如需定制 SVG 黑科技排版,请点此查看定制流程和套餐,低至500元/篇。

 

                                                           
                                                           

热门工具
iPaiban ProSVG黑科技编辑器
立即免费试用
i排版公众号图文编辑器
免费制作图文
MiSum AI聚合国内外先进AI大模型
注册送300积分
品牌时光机SVG交互图文案例库
限时免费搜索
推荐阅读
1
不愧是Apple!6种苹果味儿十足排版效果请收好!12025-06-16
2
不愧是Apple!6种苹果味儿十足排版效果请收好!22025-06-16
3
不愧是Apple!6种苹果味儿十足排版效果请收好!32025-06-16
4
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
5
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
6
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
组件教程
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
SVG案例
推荐指数4.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车体育运动
人民日报
2025-06-17
聚焦SVG排版技巧与创意应用的实用手册合集
首页组件教程
“在图文里播放音频,可以去掉音频的悬浮窗吗?”2024-07-11 09:00

 

                                               


点击图片,播放音频。

这种效果大家很常见了。相比于直接点击播放音频卡片,在长图排版中这种播放音频的方式显然更好一些。

不过不少追求完美的小伙伴,还是觉得点击后弹出的小悬浮窗会影响沉浸阅读的效果。如下:


那么,如何将音频的悬浮弹窗去掉呢?

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


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

 

                       




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

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

编号:11354(组件)


 

                       



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

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

编号: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步:导入公众号后台

该效果不支持在编辑器预览。点击同步至微信后台等待同步成功,然后扫码预览效果即可。


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

如需局部导入可参考:《iPaiban Pro小助手安装和使用教程》



制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。



SVG 黑科技交互排版👇🏻

 

                                               
                                               
                                               

如需定制 SVG 黑科技排版,请点此查看定制流程和套餐,低至500元/篇。

 

                                                           
                                                           

热门工具
iPaiban ProSVG黑科技编辑器
立即免费试用
i排版公众号图文编辑器
免费制作图文
MiSum AI聚合国内外先进AI大模型
注册送300积分
品牌时光机SVG交互图文案例库
限时免费搜索
推荐阅读
1
不愧是Apple!6种苹果味儿十足排版效果请收好!12025-06-16
2
不愧是Apple!6种苹果味儿十足排版效果请收好!22025-06-16
3
不愧是Apple!6种苹果味儿十足排版效果请收好!32025-06-16
4
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
5
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
6
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
组件教程
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
SVG案例
推荐指数4.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车体育运动
人民日报
2025-06-17
i排版_iPaiban_客服微信扫码加客服领会员
联系邮箱:i@playhudong.com
i排版_iPaiban_公众号i排版_iPaiban_知乎i排版_iPaiban_微博i排版_iPaiban_哔哩哔哩
京ICP备14043207号-2 京公网安备11010802023272号
小黄人科技@2025 | 服务协议