说在前面
最近追剧的时候发现，现在很多视频平台都会在视频暂停的时候播放广告，并将播放的视频页面缩小到角落里，长视频平台的"暂停广告"似乎已成行业潜规则。
效果展示
体验地址
实现思路
那么这种“反人性的交互设计”功能是怎么实现的呢？接下来就让我们一起来就简单实现一个视频暂停广告组件。
模板部分
主要包含两个核心区域
视频播放区域
使用 <video> 标签嵌入主视频，通过一系列属性如 controls 显示播放控制条，playsinline 支持内联播放，autoplay 实现自动播放，muted 初始静音播放等，为用户提供基本的视频播放体验。同时，监听 @pause 事件，当视频暂停时触发 videoClick 方法，从而切换到广告展示状态。
广告展示区域
当视频暂停时，这个区域会显示出来。它包含了静音切换图标、关闭广告按钮、广告视频和广告图片等元素。用户可以通过点击相应的图标或按钮来控制广告的播放和关闭。
props参数
width
播放视频宽度，默认值为300px
height
播放视频高度，默认值为200px
loop
是否循环播放视频
videoUrl
播放视频链接
advertisementUrl
广告视频链接，在广告面板左侧播放视频
advertisementImg
广告图片链接，在广告面板右侧展示
监听视频暂停
在vue中，我们可以直接通过 @pause 来监听 video 标签视频暂停事件。
<video
v-show="showVideo"
ref="video"
class="j-video-advertisement-video"
controls
playsinline
autoplay
muted
:style="getJVideoSpeedStyle"
:src="videoUrl"
:loop="loop"
@pause="videoClick"
>
</video>
视频暂停后将广告面板呈现出来，原视频截取当前时间的视频帧显示到广告面板的右下角。
videoClick() {
this.showAdvertisement = true;
this.showVideo = false;
this.coverImg = this.cutCover(this.$refs.video);
},
截取视频帧
cutCover(video, currentTime) {
if (currentTime) video.currentTime = currentTime;
const canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = parseInt(this.width);
canvas.height = parseInt(this.height);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const img = canvas.toDataURL("image/png");
return img;
},
继续播放原视频
点击右下角图片后显示原视频面板，继续播放原视频。
coverImgClick() {
this.showAdvertisement = false;
this.showVideo = true;
this.$refs.video.play();
},
广告静音切换
播放广告默认是静音播放，可以通过右上角声音图片切换声音状态
<video
v-show="showAdvertisement"
class="j-video-advertisement-content-left-video"
ref="advertisement"
playsinline
autoplay
:src="advertisementUrl"
:muted="muted"
:loop="true"
>
</video>
直接修改绑定的muted即可。
changeMuted(muted) {
this.muted = muted;
},
关闭广告，放大暂停页面
可以主动关闭广告，显示正常的视频暂停页面，直接切换显示视频面板即可
closeAdvertisement() {
this.showAdvertisement = false;
this.showVideo = true;
},
组件库
组件文档
目前该组件也已经收录到我的组件库，组件文档地址如下： jyeontu.xyz/jvuewheel/#…
组件内容
组件库中还有许多好玩有趣的组件，如：
- 悬浮按钮
- 评论组件
- 词云
- 瀑布流照片容器
- 视频动态封面
- 3D轮播图
- web桌宠
- 贡献度面板
- 拖拽上传
- 自动补全输入框
- 图片滑块验证
等等……
组件库源码
组件库已开源到gitee，有兴趣的也可以到这里看看：gitee.com/zheng_yongt…
- 🌟觉得有帮助的可以点个star~
- 🖊有什么问题或错误可以指出，欢迎pr~
- 📬有什么想要实现的组件或想法可以联系我~
公众号
关注公众号『前端也能这么有趣』，获取更多有趣内容。
公众号发送 加群 可以加入群聊，一起来学习（摸鱼）吧~
说在后面
🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『
前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。
