今天写这篇文章,主要是手里的项目,有关视频的,页面长得类似抖音,video上面有头像,昵称,点赞,评论,内容等。坑就坑在视频上了,之前不知道video全屏播放时,会把其他的页面内容覆盖掉,我在其他非video上加上z-index,级别加的特别高,然而没啥用,还是除了video,其他的都不显示,另外还百度查了video的级别,不管其他非video的东西设置的z-index比video还要高。最后无意中发现了cover-view,索性试了一下,发现起作用了,但是不怎么好用,也没有别的啥方法能想起来。磨磨蹭蹭搞了半天,发现cover-view能用到的属性特别少。具体可以看微信开发文档。
手机端下的video标签播放时会被浏览器接管。此时已经脱离了文档流,并且与文档已经非同层了,所以设置z-index是无效的。
cover-view 在小程序中是比较特殊的组件,与 view 的最大区别在于,它能覆盖在原生组件 map、video、canvas、camera 之上,且只能嵌套 cover-view 和 cover-image。(注:不怎么好用,有点坑。)
video上面的例如:头像、点赞、昵称,这些我都是用定位写的,其他的样式使用起来不生效。cover-image(自身的border-radius属性,使用了多次就是不生效,有大神指导怎么使用的,请多多指教!)。
还有就是在真机测试时,视频上面的点赞图标和评论图标不显示,搞了半天才知道是图片路径问题。在打包成apk时,本地用的图片要上传到服务器,并且代码里面的<image src="http:demo.9999.com/img.png"></image> src的路径要写成图片在服务器中的路径。这样在真机运行时才会生效。