基于Vue.js2.6结合h5来实现视频播放画中画技术(Picture-in-Picture)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_125
在开发基于vue.js的在线视频教育平台的时候,我们会注意一个小问题,就是如果用户在观看播放视频的同时,也会往下拖动窗口浏览一些评论,这样视频就会被滚动条覆盖,导致用户无法在浏览评论的同时观看视频,同理,如果想边刷微博边追剧怎么办?想边聊微信边看球赛怎么办?
目前我们可以用h5的技术来解决这个问题,支持HTML5 播放时候Picture-in-Picture,也就是俗称的画中画技术,也就是很多视频网站看评论时候,播放视频变小挂在右下角的这种交互技术。
先看效果:
可以看到,当触发了画中画特效,网站右下角就会出现一个小型的视频播放器,它能够浮动跟踪于窗口,这样就能在浏览信息的同时也可以观看视频。
画中画看上去很酷炫,实际上,实现非常简单。
// 进入画中画
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>
虽然简单,但是有效,做产品就得注意细节,就算是研发岗位也得有产品思想,否则就会被时代淘汰,最后奉上代码仓库项目地址:https://gitee.com/QiHanXiBei/myvue
原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_125
基于Vue.js2.6结合h5来实现视频播放画中画技术(Picture-in-Picture)的更多相关文章
- 追求极致的用户体验ssr(基于vue的服务端渲染)
首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见 ...
- 基于Vue.js的uni-app前端框架结合.net core开发跨平台project
一.由来 最近由于业务需要要开发一套公益的APP项目,因此结合所给出的需求最终采用uni-app这种跨平台前端框架以及.netcore快速搭建我们的项目,并且能做到一套代码跨多个平台. 当然在前期技术 ...
- 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- 在微信框架模块中,基于Vue&Element前端的微信公众号和企业微信的用户绑定
在一个和微信相关的业务管理系统,我们有时候需要和用户的微信账号信息进行绑定,如对公众号.企业微信等账号绑定特定的系统用户,可以进行扫码登录.微信信息发送等操作,用户的绑定主要就是记录公众号用户的ope ...
- 在centos7.6上部署前后端分离项目Nginx反向代理vue.js2.6+Tornado5.1.1,使用supervisor统一管理服务
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_102 这一次使用vue.js+tornado的组合来部署前后端分离的web项目,vue.js不用说了,前端当红炸子鸡,泛用性非常广 ...
- 一次基于Vue.Js用户体验的优化
.mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...
- 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...
- 基于vue的颜色选择器color-picker
项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...
随机推荐
- vmware 无法安装 win 10
因为默认是 UEFI,但我们并没有 UEFI 引导分区,所以需要改成 BIOS
- 论文阅读 DyREP:Learning Representations Over Dynamic Graphs
5 DyREP:Learning Representations Over Dynamic Graphs link:https://scholar.google.com/scholar_url?url ...
- 图解Dijkstra(迪杰斯特拉)算法+代码实现
简介 Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Dijkstra算法是很有代表性的 ...
- 个人冲刺(六)——体温上报app(一阶段)
任务:完成了自动获取定位信息以及自动获取时间功能 自动获取定位信息 public void onReceiveLocation(BDLocation location){ //此处的BDLocatio ...
- 【仿真】Carla介绍与基本使用 [1] (附代码 基础版)
0. 参考与前言 主要介绍无人驾驶的仿真环境CARLA,开源社区维护,以下为相关参考链接: Carla官方文档 建议后续找的时候 先按好版本号,有些功能/api 是新版本里有的 Carla官方gith ...
- SpringBoot+Mybatis-Plus整合Sharding-JDBC5.1.1实现单库分表【全网最新】
一.前言 小编最近一直在研究关于分库分表的东西,前几天docker安装了mycat实现了分库分表,但是都在说mycat的bug很多.很多人还是倾向于shardingsphere,其实他是一个全家桶,有 ...
- wsl2环境搭建
序言 我电脑配置不高,开虚拟机跑linux总觉得太卡.最近才了解到windows早就上了wsl2--一款较为轻量的虚拟机软件.所以本篇博客偏笔记向,存粹记录以便多次使用. 环境 宿主机windows1 ...
- VMware Workstation 虚拟机详细安装教程
一.介绍篇 VMware Workstation 16 Pro是VMware(威睿公司)于2021年最新发布的一代虚拟机软件,软件的中文名是"VMware 工作站 16 专业版". ...
- Python爬虫-正则
介绍: 是 一门全新的语言,一种使用表达式的方式对字符串进行匹配的语法规则 我们抓取到的网页源代码本质上就是一个超长的字符串,想从里面提取内容,用正则再适合不过 优点:速度快.效率高.准确性高 缺点: ...
- 关于webstorm更换主题
现在我们前端使用编辑器,只要用习惯就好,不过这里推荐使用webstorm,因为被称为,'js神器'的称号,不是白说的.接下来我们来看下怎么引入主题. 下面有一个网站,这个网站的名字叫 http://w ...