h5 右下角浮动按钮_基于Vue.js2.6结合h5来实现视频播放画中画技术(Picture-in-Picture)...

在开发基于vue.js的在线视频教育平台的时候,我们会注意一个小问题,就是如果用户在观看播放视频的同时,也会往下拖动窗口浏览一些评论,这样视频就会被滚动条覆盖,导致用户无法在浏览评论的同时观看视频,同理,如果想边刷微博边追剧怎么办?想边聊微信边看球赛怎么办?

目前我们可以用h5的技术来解决这个问题,支持HTML5 <video>播放时候Picture-in-Picture,也就是俗称的画中画技术,也就是很多视频网站看评论时候,播放视频变小挂在右下角的这种交互技术。

先看效果:

6c65842b1534ebec6746a6922f7611fc.png

可以看到,当触发了画中画特效,网站右下角就会出现一个小型的视频播放器,它能够浮动跟踪于窗口,这样就能在浏览信息的同时也可以观看视频。

画中画看上去很酷炫,实际上,实现非常简单。

// 进入画中画
video.requestPictureInPicture();
// 退出画中画
document.exitPictureInPicture();

为了方便用户进入和退出画中画模式,我们可以加一个按钮逻辑

//画中画
into:function(){

if (video !== document.pictureInPictureElement) {
// 尝试进入画中画模式
video.requestPictureInPicture();    
this.mymsg = '退出画中画';  
} else {
// 退出画中画
document.exitPictureInPicture();
this.mymsg = '进入画中画';
}

}

需要注意一点,使用画中画需要为视频空间添加一个选择器id="video",这虽然违背vue的数据双向绑定理念,但是目前控制方法只能如此

<video id="video"  width="320" height="240" src="http://localhost:8000/static/upload/test.mp4" controls="controls" autoplay="autoplay" muted loop="loop" >
                    您的浏览器不支持 video 标签。
                    </video>

98641cba7ee4b77cdbda165874f27b20.png

虽然简单,但是有效,做产品就得注意细节,就算是研发岗位也得有产品思想,否则就会被时代淘汰,最后奉上代码仓库项目地址:https://gitee.com/QiHanXiBei/myvue

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值