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

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

1、css样式

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

/*视频父级都给100%,充满整个区域*/
 #video {
 width: 100%;
 height: 100%;
 }
 /*视频插件的样式,这里重写覆盖*/
 .video-js .vjs-tech{
 position: absolute;
 top: 0;
 left: 0;
 width: auto;
 height: auto;
 min-height: 100%;
 min-width: 100%;
 z-index: 1;/*数字越大,层级越高*/ 
 }
/*视频上的一个膜层,可以根据自己需要添加*/
 .mask{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 2;
 opacity: 0.4;
 background: #CCCCCC;
 }
 label{
 position: absolute;
 top: 300px;
 left: 0;
 right: 0;
 z-index: 3;
 text-align: center;
 }

2、js控制

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

<script>
			function playVideo() {
				var oPlayer = videojs('video');
//				console.log($(document).scrollTop());
//可以在控制台打出视屏距离顶部的距离,2700到3600像素分别是视频的区域,当鼠标滑动到此区域时,视频自动播放
				if(($(document).scrollTop()>2700) && ($(document).scrollTop()<3600)) {
					oPlayer.play();
					oPlayer.playbackRate(1.1);//设置视频速度,默认为1,越大速度越快
				} else {
					oPlayer.pause();
				}
			}
			playVideo();

			var scrollFunc = function(e) {
				e = e || window.event;
				if(e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件               
					if(e.wheelDelta > 0) { //当滑轮向上滚动时  
						playVideo();
					}
					if(e.wheelDelta < 0) { //当滑轮向下滚动时  
						playVideo();
					}
				} else if(e.detail) { //Firefox滑轮事件  
					if(e.detail > 0) { //当滑轮向上滚动时  
						playVideo();
					}
					if(e.detail < 0) { //当滑轮向下滚动时  
						playVideo();
					}
				}
			}
			//给页面绑定滑轮滚动事件  
			if(document.addEventListener) { //firefox  
				document.addEventListener('DOMMouseScroll', scrollFunc, false);
			}
			//滚动滑轮触发scrollFunc方法  //ie 谷歌  
			window.onmousewheel = document.onmousewheel = scrollFunc;
		</script>

3、html代码

<section id="sec5" class="sec5">
			<div class="mask"></div>
			<label>
				<h2>火辣辣个人前端博客</h2>
				<h2>网址:http://huolalaweb.com</h2>
			</label>
			<video id="video" class="video-js vjs-default-skin" loop  preload="none" data-setup="{}">
				<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
			</video>
</section>

视频

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

 

 

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

发表评论

邮箱地址不会被公开。

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