效果图
大概就是如下图所示效果,可根据需求自行修改。
注:微信已实现同层渲染,请将 cover-view
替换为 view
。
首先,在 video
标签中添加 view
或 cover-view
标签,然后各功能实现思路如下:
- 【自定义封面】:封面图可直接设置
video
组件的poster
属性。 - 【自定义按钮】:在
view
容器里套图像标签后设置css
定位即可。 - 【封面图文字】:在
view
容器里套文字标签后设置css
定位即可。
最后,给自定义按钮绑定点击事件,触发事件后隐藏最外层 view
,给 video
绑定 bindended
事件设置最外层 view
显示。
下面贴出源代码,可直接使用或封装成组件,根据自身需求来修改。
wxml: