037 ∞ 视图容器：cover-view

不二如是

                               
登录/注册后可看大图

上一讲我们搞定movable-view，本次来学习cover-view。

cover-view，覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。

cover-image，覆盖在原生组件之上的图片视图。

可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

其属性：

属性名	类型	默认值	说明
src	String	图标路径，支持临时路径、网络地址（1.6.0起支持）。暂不支持base64格式。

代码要用到的素材： Archive.zip (21.73 KB, 下载次数: 5, 售价: 3 鱼币)

2018-6-14 14:09 上传

点击文件名下载附件

在项目index下，创建一个文件夹用来存放上面的照片：

index.wxml：

1. <video id="myVideo" src="http://fishc.oss-cn-hangzhou.aliyuncs.com/Web/video_tag.mp4" controls="{{false}}" event-model="bubble">
   
2.   <cover-view class="controls">
   
3.     <cover-view class="play" bindtap="play">
   
4.       <cover-image class="img" src="./img/play.png" />
   
5.     </cover-view>
   
6.     <cover-view class="pause" bindtap="pause">
   
7.       <cover-image class="img" src="./img/pause.png" />
   
8.     </cover-view>
   
9.   </cover-view>
   
10. </video>

复制代码

video元素，在线加载鱼C课程的一段BGM。

cover-view中设置了cover-image用来遮盖。

添加样式：

1. .controls {
   
2.   position: relative;
   
3.   top: 50%;
   
4.   height: 50px;
   
5.   margin-top: -25px;
   
6.   display: flex;
   
7. }
   
8. .play,.pause,.time {
   
9.   flex: 1;
   
10.   height: 100%;
    
11. }
    
12. .time {
    
13.   text-align: center;
    
14.   background-color: rgba(0, 0, 0, .5);
    
15.   color: white;
    
16.   line-height: 50px;
    
17. }
    
18. .img {
    
19.   width: 40px;
    
20.   height: 40px;
    
21.   margin: 5px auto;
    
22. }

复制代码

index.js：

1. Page({
   
2.   onReady() {
   
3.     this.videoCtx = wx.createVideoContext('myVideo')
   
4.   },
   
5.   play() {
   
6.     this.videoCtx.play()
   
7.   },
   
8.   pause() {
   
9.     this.videoCtx.pause()
   
10.   }
    
11. })

复制代码

示例代码使两张图片浮于video视频的上方。

---

课后作业


1、补充代码在video中实现cover-view效果：

1. <video id="myVideo" src="https://www.w3cschool.cn/video" controls="{{false}}" event-model="bubble">
   
2.   <？ class="play" bindtap="play">
   
3.     <？ class="img" src="/path/to/icon_play" />
   
4.   <？>
   
5. </video>

复制代码

答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

一笙彤

0