滑动到视频video时候,自动全屏播放

上一篇文章介绍了插件video.js,但在项目中网页很长,并且是在下面要求滑动到视频的时候,视频自动全屏循环播放,且去掉控制条放在第一层当背景视频,第二层加膜层,第三层加文字展示。

1、css样式

难点:主要是视频兼容的问题,当视频比列不满足当前播放区域的比例时,旁边就会留黑条,十分影响用户体验

2、js控制

难点:监控视频的位置,可以用视频在页面中距离顶部的距离,也可以监测其他项,根据自己业务需要;然后调用鼠标滚动事件,时时监测

3、html代码

视频

总结:以上我都贴出来了主要代码供大家参考,如果大家还不懂得可以下载此例题的源码,进行学习005-video-auto

 

 

欢迎转载,转载需带着文章出处链接~~

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据