“视频和图片间有一条黑线，去不掉怎么办啊？”
图片和视频如何无缝拼接？
使用「视频-无缝拼接」组件（编号：10016）。
要是在以前，上面一句话就已经解答了问题，而现在，可能需要专门出一篇文章来聊一聊。
最近无论使用「视频-无缝拼接」组件还是会代码的小伙伴自己制作，会发现在很多手机中，视频上边缘或下边缘总是有一条黑线，尝试了包括「间距」等各种方法也去不掉。
这条黑线其实是视频上传后台后带的（猜测是微信的一个bug），又因为视频在图文中的显示层级比图片高，所以用传统的方式很难去掉。
如果真的无法忍受那条黑线，我们可以换用另外两个视频组件进行排版。（结尾有补充的第3个方法）
虽然去不掉，但可以盖住啊！
方法一
添加图片封面
示例：
*素材来自长安汽车《叮！你有一份新的订单正在生成》
组件：视频-无缝拼接(图片封面)
编号：10111（组件）
第1步：
在 iPaiban Pro 编辑器中选择「视频-无缝拼接(图片封面)」组件（编号：10111），然后点击右侧「换图」按钮上传视频图片封面。
注意：图片封面尺寸为N倍的343px * 193px，需在图片正中央设计一个播放按钮引导用户点击。
第2步：
填写视频的 data-mpvid。
视频 data-mpvid 可使用 iPaiban Pro 小助手插件获取，如未安装戳：《iPaiban Pro小助手安装和使用教程》
安装后的获取视频 id 的方法见《iPaiban Pro小助手安装和使用教程》中的「使用教程-提取功能-视频」部分。
方法二
调整视频大小并添加遮罩
示例：
*素材来自苏州银行直销银行《〈速度与激情10〉来了！仅需8元+积分即可观影》
组件：视频-无缝拼接(可调整大小及位置)
编号：10152（组件）
组件：遮罩
编号：10829（组件）
第1步：
在 iPaiban Pro 编辑器中选择「视频-无缝拼接(可调整大小及位置)」组件（编号：10152），然后点击右侧「换图」按钮上传底图，图片尺寸没有要求。
第2步：
填写视频的 data-mpvid。
视频 data-mpvid 可使用 iPaiban Pro 小助手插件获取，如未安装戳：《iPaiban Pro小助手安装和使用教程》。
安装后的获取视频 id 的方法见《iPaiban Pro小助手安装和使用教程》中的「使用教程-提取功能-视频」部分。
第3步：
双击编辑区的底图，调整视频在底图上的大小及位置。
注意调整时不要使视频超出图片或紧贴图片边缘，也就是视频边缘和底图边缘需留出一定距离。这也是没有直接推荐大家使用「视频-无缝拼接(图片遮罩)」组件（编号：10113）原因，直接使用该组件无法盖住视频黑线。
第4步：
选择「遮罩」组件（编号：10829），然后点击右侧「换图」按钮上传遮罩图。
这张图片将会覆盖在视频上方，一张合格的视频遮罩图应该是：中间镂空露出视频的主体画面，四周正好遮在视频边缘盖住黑线。
以上就是「去掉」视频上下边缘黑线的两种方法，最后简单说下两者的区别：
方法一添加图片封面，是将视频完全盖住，用户点击图片封面中间的播放按钮，图片消失同时视频播放；
方法二调整视频大小并添加遮罩，这里的遮罩只盖住视频的边缘部分，用户点击播放视频遮罩图片不会消失。
再补充一个方法：
如果你有视频号，可以将视频上传视频号，然后使用「视频号-图片」组件（编号：10228）制作点击图片跳转视频号的效果，体验也不错。
*来自亚朵ATOUR《摊牌吧！你想要啥样的宠物主题客房？》
详细教程戳：《点击GIF跳转视频号，90%的大品牌都在用的效果是怎么弄的？》
添加下方微信回复关键词【视频号】，可领取该组件免费用。
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）