微信小程序 - Video 视频组件实现自定义封面 / 播放按钮 / 封面图描述文字 （轮子示例）

效果图

大概就是如下图所示效果，可根据需求自行修改。

实现思路

注：微信已实现同层渲染，请将 cover-view 替换为 view 。

首先，在 video 标签中添加 view 或 cover-view 标签，然后各功能实现思路如下：

• 【自定义封面】：封面图可直接设置 video 组件的 poster 属性。
• 【自定义按钮】：在 view 容器里套图像标签后设置 css 定位即可。
• 【封面图文字】：在 view 容器里套文字标签后设置 css 定位即可。

最后，给自定义按钮绑定点击事件，触发事件后隐藏最外层 view，给 video 绑定 bindended 事件设置最外层 view 显示。

源码

下面贴出源代码，可直接使用或封装成组件，根据自身需求来修改。

wxml：