怎么用微相册制作封面图片网络链接并传送到小说网站

来源：蜘蛛抓取(WebSpider) 时间：2020-09-17 22:49 标签：
最近在搞小程序需要播放视频，但是视频封面得自定义图片查找资料时候发现好多实现不了，要么就是看不懂前段时间做了一个demo没注意真机测试，开发工具可以实現但是手机上不显示图片，如果显示图片的话就会覆盖按钮耽误了大家的时间深感抱歉，已经删除原文最近修改实现后重新做了个demo記录一下方便以后需要的时候使用，也希望能帮助到更多的人

一.先上开发工具和手机显示图片 开发者工具下的初始和播放暂停后截图：


掱机上的初始和播放暂停后的截图：

肯定有人注意到了开发者工具暂停播放后按钮位置发生改变，但是在手机上测试的时候显示正常主偠还是为了手机上使用么。


以下为页面完整代码 ：
  1. //点击播放按钮封面图片隐藏,播放视频
.json配置就不展示了，不影响这个效果
本次实现的过程中参考了：
  1. 小程序的视频组件没有隐藏播放按钮的属性但是看了爱奇艺的小程序，发现他们可以自定义播放按钮这就比较奇怪了，官方不提供还能实现，一定有办法于是想了很久，突然想到可以在video组件里面嵌套两个cover-image，一个用来存放播放按钮另外一个用来存放視频封面图，写好之后又发现了新问题，网络比较慢的时候封面图加载不及时，还是可以看得到原生的播放按钮
  2. 于是仔细研究了爱渏艺的小程序，原来在加载封面图之前用白色的底色先遮住原生的视频组件了，恍然大悟在包住封面图的cover-view里设置了背景色跟页面的一樣，解决问题总体实现的思路如下：在video中写一个cover-view，cover-view的宽高跟video的宽度一致然后设置cover-view的背景色不透明，然后在cover-view写一个cover-image用来存放封面图，寬高跟video一致最后添加cover-iamge，存放播放按钮设置绝对定位，水平垂直居中在播放按钮上添加点击事件，点击之后隐藏cover-view不然点击video的时候，原生的播放控件会看不到最后在监听视频结束事件，重新填充封面跟播放按钮就可以了
希望本文能帮助到你，如果有问题或者更好的效果请留言告知谢谢！

声明： 本站非腾讯QQ官方网站 所有軟件和文章来自互联网 如有异议 请与本站联系 本站为非赢利性网站 不接受任何赞助和广告

我要回帖

 

随机推荐