pingzi_video.js

$(document).ready(function() {
	/*
	 *  pc端判断
	 */
	function IsPC() {
		var userAgentInfo = navigator.userAgent;
		var Agents = ["Android", "iPhone",
			"SymbianOS", "Windows Phone",
			"iPad", "iPod"
		];
		var flag = true;
		for(var v = 0; v < Agents.length; v++) {
			if(userAgentInfo.indexOf(Agents[v]) > 0) {
				flag = false;
				break;
			}
		}
		return flag;
	}
	/*
	 * 随机数
	 * */
	function _charecter() {
		var character = String.fromCharCode(Math.floor(Math.random() * 26) + "A".charCodeAt(0));
		return character;
	}
	/*
	 *  补0
	 */
	function addzero(num) {
		if(num < 10) {
			return("0" + num);
		} else {
			return num;
		}
	}
	/*
	 *  视频事件监听事件
	 * 
	 * 	@eventName 视频事件名称
	 *  @m	视频对象
	 * 	@fun 回调函数
	 * 
	 */
	var eventTester = function(eventName, m, fun) {
		if(window.addEventListener) {
			m.addEventListener(eventName, function() {
				if(fun) {
					fun(this);
				}
				//console.log((new Date()).getTime(),eventName);
			}, false);
		} else {
			m.attachEvent('on' + eventName, function() {
				if(fun) {
					fun(this);
				}
				// console.log((new Date()).getTime(),eventName);
			});
		}
	}
	/*
	 *  视频播放
	 * 
	 */
	//视频播放
	$(".m-video").on("click", function() {
		if($(".video-box").length > 0) {
			return;
		}
		document.ondragstart = function() {
			return false;
		};
		window.onresize = function() {
			iteme = setTimeout(function() {
				if(!checkFull()) {
					//要执行的动作
					$("body").removeClass("noscroll");
					$(".video-box").removeClass("quanping");
					$(".video-fullscreen").find("i").removeClass("i-suoxiao").addClass("i-quanping");
				} else {
					$("body").addClass("noscroll");
					$(".video-box").addClass("quanping");
					$(".video-fullscreen").find("i").removeClass("i-quanping").addClass("i-suoxiao");
				}
			}, 0)
		}
		function checkFull() {
			var explorer = window.navigator.userAgent.toLowerCase();
			console.log(window.screen.width, window.outerWidth, window.screen.height, window.outerHeight)
			if(explorer.indexOf('chrome') > 0) { //chrome
				if((window.screen.width - window.outerWidth <= 17) && (window.screen.height - window.outerHeight <= 17)) {
					return true;
				} else {
					return false;
				}
			} else { //IE 9+  fireFox
				if(window.outerWidth == screen.width) {
					return true;
				} else {
					return false;
				}
			}
		}

		function quanpin(elem) {
			if(IsPC()) {
				var elem = document.documentElement;
			} else {
				if(elem.paused && elem.networkState <= elem.HAVE_METADATA) {
					elem.play();
					setTimeout(function() {
						elem.pause();
						elem.webkitEnterFullScreen();
						return;
					}, 0);
				} else {
					elem.webkitEnterFullScreen();
					return;
				}
			}
			if(elem.requestFullscreen) {
				//"W3C";
				elem.requestFullscreen();
			} else if(elem.mozRequestFullScreen) {
				//FireFox
				elem.mozRequestFullScreen();

			} else if(elem.webkitRequestFullScreen) {
				//Chrome等
				elem.webkitRequestFullScreen();

			} else if(elem.msRequestFullscreen) {
				//IE11
				console.log(11);
				elem.msRequestFullscreen();
			}
		}

		function exitquanping() {
			if(document.exitFullscreen) {

				document.exitFullscreen();

			} else if(document.mozCancelFullScreen) {

				document.mozCancelFullScreen();

			} else if(document.webkitCancelFullScreen) {

				document.webkitCancelFullScreen();

			} else if(document.msExitFullscreen) {

				document.msExitFullscreen();

			}
		}
		var menuarr;
		var menustr="";
		if($(this).attr("data-menu")){
			menuarr=$(this).attr("data-menu").split(" ");
			$(menuarr).each(function(k){
				menustr+="<li class='video-menu-item video-menu-item-"+k+" "+(k==0?"video-active":"")+"'  >"+this+"</li>";
			})
		}

		var datasrc = $(this).attr("data-src"),src='';
		var  dangqian="";
		if(src.indexOf("mp4")<0&&$(this).attr("data-menu")){
			dangqian=menuarr[0];
			src = datasrc+dangqian+".mp4";
		}else{
			src = datasrc;
		}
		if(!src) {
			alert("未添加视频链接");
		}
		console.log(src);
		var menu=["<div class='video-definition video-tooltip '>",
			"<button class='video-button video-tooltip-toggle video-definition-button'>",
			"<span>"+dangqian+"</span>",
			"</button>",
			"<div class='video-tooltip-content'>",
			"<ul class='video-menu'>",
				menustr,
			"</ul>",
			"</div>",
			"</div>"];
		if(!$(this).attr("data-menu")){
			menu=[]
		}
		var vClass = $(this).attr("data-heibian") ? "heibian" : "";
		var videoid = "my" + _charecter() + _charecter();
		var iteme = null;
		var str = ["<div class='video-box " + vClass + "' id='" + videoid + "box'>",
			"<div class='video-bg'></div>",
			"<div class='video-loading-pulse'></div>",
			"<div class='video-close'></div>",
			"<div class='video-container f-czspjuzhong'>",
			"<div class='video-div'>",
			"<div class='video-video'>",
			"<video id=" + videoid + "  x-webkit-airplay='' playsinline='' webkit-playsinline='' ",
			"src='" + src + "'",
			">",
			"</video>",
			"</div>",
			"<div class='video-bofang f-czspjuzhong '> <i class='i i-bofang '></i></div>",
			"<div class='video-loading yihuanchun f-czspjuzhong'> <i class='i i-loading '></i></div>",
			"<div class='video-ui'>",
			"<div class='video-progress'>",
			"<div class='video-tooltip video-tinytip video-tooltip-time'>",
			"<button class='video-tooltip-toggle'>",
			"<span class='video-tooltip-value'></span>",
			"</button>",
			"<div class='video-tooltip-content'>",
			"<div class='video-tinytip-content'>",
			"<span class='video-text'></span>",
			"</div>",
			"</div>",
			"</div>",
			"<div class='video-progress-padding'></div>",
			"<div class='video-progress-list'>",
			"<div class='video-progress-buffer'></div>",
			"<div class='video-progress-hover'></div>",
			"<div class='video-progress-play'><span class='video-progress-handle'></span></div>",
			"</div>",
			"</div>",
			"<div class='video-controls-buttons'>",
			"<button class='video-bofang video-button'> <i class='i i-bofang f-czspjuzhong'></i></button>",
			"<span class='video-time-panel'>",
			"<span class='video-time-panel-current'>00:00</span>",
			"<span class='video-time-panel-split'>&nbsp&nbsp/&nbsp&nbsp</span>",
			"<span class='video-time-panel-total'>00:00</span>",
			"</span>",
			"<div class='video-fullscreen'>",
			"<button class='video-button video-tooltip-toggle video-fullscreen-default' type='button'>",
			"<i class='i i-quanping f-czspjuzhong'></i>",
			"</button>",
			"</div>",
			menu.join(""),
			"<div class='video-volume video-popup'>",
			"<button class='video-button video-btn-volume' data-state='volume'>",
			"<i class='i i-voice-on f-czspjuzhong'></i>",
			"</button>",
			"<div class='video-volume-slider video-popup-content'>",
			"<div class='video-volume-range'>",
			"<div class='video-volume-range-current' style='height: 50%;'>",
			"<div class='video-volume-handle'></div>",
			"</div>",
			"</div>",
			"<div class='video-tinytip-tiao'></div>",
			"</div>",
			"</div>",
			"</div>",
			"</div>",
			"</div>",
			"</div>",
			"</div>"
		]
		$("body").append(str.join(""));
		var meido = document.getElementById(videoid);
		meido.volume = .5;
		var videobox = $("#" + videoid + "box");

		/*视频缓存成功可以获取长度和播放*/
		eventTester("waiting", meido, function() {
			console.log(" 等待数据，并非错误");
			$(".video-loading").removeClass("yihuanchun");
		});
		eventTester("playing", meido, function() {
			console.log("播放了");
			videobox.addClass("video-playing").removeClass("video-pause");
			$(".video-loading").addClass("yihuanchun");
		});
		eventTester("stalled", meido, function() {
			console.log("/网速失速");
		});
		eventTester("ended", meido, function() {
			//console.log("播放结束");
//			$(".video-close").click();
		});
		eventTester("canplay", meido, function() {
			//console.log("可以播放");
			$(".video-container",videobox).addClass("video-ready");
			meido.canplay=true;
			meido.play();
			$(".video-bofang").find("i").removeClass("i-bofang").addClass("i-zhanting").css("transition","none");
		});
		eventTester("loadedmetadata", meido, function() {
			//console.log("成功获取时长")
			$(".video-time-panel-total").html(addzero(parseInt(meido.duration / 60)) + ":" + addzero(parseInt(meido.duration % 60)));
		});
		eventTester("suspend",meido,function(){
//			$(".video-loading").removeClass("yihuanchun");
			console.log("延迟下载")
		})
		eventTester("loadstart",meido,function(){
			console.log("客户端开始请求数据")
			$(".video-loading").removeClass("yihuanchun");
		})
		eventTester("progress",meido,function(){
			$(".video-container",videobox).addClass("video-ready");
			console.log("客户端正在请求数据")
		})
		/*进度相关*/
		eventTester("timeupdate", meido, function() {
			//console.log("播放时间改变");
			if(meido.canplay){
				var currentTime = meido.currentTime;
				var buffered = meido.buffered.end(0);
				var duration = meido.duration;
				for(var i = 0; i < meido.buffered.length; i++) {
					if(currentTime < meido.buffered.end(i)) {
						buffered = meido.buffered.end(i);
						break;
					}
				}
				var buff_pro = parseInt((buffered / duration) * 100);
				$(".video-time-panel-current").html(addzero(parseInt(currentTime / 60)) + ":" + addzero(parseInt(currentTime % 60)));
				$(".video-progress-play").css("width", currentTime / duration * 100 + "%");
				$(".video-progress-buffer").css("width", buff_pro + "%");
			}
		});
		var mx = 0;
		$(document).on("mousemove", function(e) {
			mx = e.screenX;
		})
		eventTester("play", meido, function(e) {
			videobox.addClass("video-playing").removeClass("video-pause");
			$(".video-bofang.f-czspjuzhong").addClass("video-hide");
			//var ny=e.cy
			var px = mx;
			clearTimeout(iteme);
			iteme = setTimeout(function() {
				if(px == mx) {
					$(".video-div").addClass("video-hide-ui");
				}
			}, 5000);
		});
		eventTester("pause", meido, function() {
			videobox.addClass("video-pause").removeClass("video-playing");
			$(".video-bofang.f-czspjuzhong").removeClass("video-hide");
		});
		eventTester("ended", meido, function() {
			videobox.removeClass("video-pause video-playing");
			$(".video-bofang").find("i").removeClass("i-zhanting").addClass("i-bofang");
//			$(".video-bofang.f-czspjuzhong").removeClass("video-hide");
		});
		/*
		 * 播放暂停切换
		 * 
		 * */
		$(".video-bofang,.video-video").on("click", function(e) {
			if(IsPC() || e.currentTarget.classList[0] == "video-bofang" || e.target.classList[0] == "video-bofang") {
				clearTimeout(iteme);
				iteme = setTimeout(function() {
					//do function在此处写单击事件要执行的代码
					if($(".video-bofang").find("i").hasClass("i-bofang")) {
						meido.play();
						$(".video-bofang").find("i").removeClass("i-bofang").addClass("i-zhanting");
					} else {
						meido.pause();
						$(".video-bofang").find("i").removeClass("i-zhanting").addClass("i-bofang");
					}
				},100);
			} else {
				if(videobox.hasClass("hideui")) {
					videobox.removeClass("hideui");
				} else {
					videobox.addClass("hideui");
				}
			}
		});
		/*
		 * 双击全屏
		 * 
		 * */
		$(".video-video").on("dblclick", function() {
			if(IsPC()) {
				clearTimeout(iteme);
				if(videobox.hasClass("quanping")) {
					exitquanping();
				} else {
					quanpin();
				}
			}
		});
		/*
		 *
		 *  鼠标移入隐藏UI
		 * 
		 * */
		$(".video-ui").on("mouseleave", function() {
			clearTimeout(iteme);
			iteme = setTimeout(function() {
				//do function在此处写单击事件要执行的代码
				$(".video-div").addClass("video-hide-ui");
			}, 5000);

		});
		$(".video-ui").on("mouseenter", function() {
			$(".video-div").removeClass("video-hide-ui");
		});
		/*
		 *
		 *  关闭video
		 * 
		 * */
		$(".video-close").on("click touchstart", function() {
			videobox.remove();
		});
		//进度条面板相对浏览器的左边的距离
		var parent_left = 0;
		//鼠标位置相对浏览器的左边的距离
		var e_left = 0;
		/*
		 *  进度条
		 */
		$(".video-progress", videobox).on("mousemove touchmove", function(e) {
			var event;
			if(e.offsetX) {
				event = e;
			} else if(e.originalEvent.changedTouches[0].clientX) {
				event = e.originalEvent.changedTouches[0];
			}
			parent_left = $(this).offset().left;
			//鼠标位置相对浏览器的左边的距离
			e_left = event.pageX;
			var width = e_left - parent_left;
			var wb = (width / $(this).width());
			var tt = wb * meido.duration;
			$(".video-tooltip", $(this)).css({
				"left": (wb * 100) + "%"
			});
			$(".video-progress-hover", videobox).css({
				"width": (wb * 100) + "%"
			});
			$(".video-text", videobox).html(addzero(parseInt(tt / 60)) + ":" + addzero(parseInt(tt % 60)));
		});
		$(".video-progress", videobox).on("click touchstart touchend", function(e) {
			videobox.removeClass("video-playing");
			var percent = ($(".video-progress-hover", videobox).width() / $(this).width());
			console.log(percent);
			meido.currentTime = (percent * meido.duration);
		});
		/*
		 *  音量
		 */
		var canMove = false;
		$(".video-tinytip-tiao", videobox).on("mousedown", function(e) {
			canMove = true;
			console.log(canMove);
			var zi = $(".video-volume-range-current", videobox);
			if(canMove) {
				volumeh = 1 - e.offsetY / $(this).height();
				console.log(volumeh);
				zi.css("height", volumeh * 100 + "%")
			} else {
				return;
			}
		});
		$(document).on("mouseup", function(e) {
			canMove = false;
		});
		var volumeh = 0;
		$(".video-tinytip-tiao", videobox).on("mousemove ", function(e) {
			var zi = $(".video-volume-range-current", videobox);
			var hh = $(".video-volume-range", videobox);
			if(canMove) {
				console.log(e);
				volumeh = 1 - (e.offsetY - 16) / hh.height();
				console.log(volumeh);
				if(volumeh <= 0) {
					$(".video-btn-volume i").removeClass("i-voice-on").addClass("i-voice-off");
				} else if(volumeh > 1) {
					volumeh = 1;
				} else {
					$(".video-btn-volume i").removeClass("i-voice-off").addClass("i-voice-on");
				}
				zi.css("height", volumeh * 100 + "%")
				meido.volume = volumeh;
			} else {
				return;
			}
		});
		$(".video-btn-volume", videobox).on("click", function() {
			if($(this).find("i").hasClass("i-voice-on")) {
				meido.volume = false;
				volumeh = $(".video-volume-range-current", videobox).height() / $(".video-volume-range", videobox).height();
				console.log(volumeh);
				$(".video-volume-range-current", videobox).css("height", 0 + "%");
				$(".video-btn-volume i").removeClass("i-voice-on").addClass("i-voice-off");
			} else {
				meido.volume = true;
				$(".video-volume-range-current", videobox).css("height", volumeh * 100 + "%");
				$(".video-btn-volume i").removeClass("i-voice-off").addClass("i-voice-on");
			}
		})
		/*
		 *  音量  结尾
		 */
		/*
		 *  全屏
		 */
		$(".video-fullscreen", videobox).on("click", function() {
			if($(this).find("i").hasClass("i-quanping")) {
				quanpin(meido);
			} else {
				console.log("退出全屏");
				exitquanping();
			}
		})
		/*
		 *  全屏结尾
		 */
		
		/*
		 *  切换清晰度
		 */
		$(".video-menu-item").on("click",function(){
			if($(this).hasClass("video-active")){
				return ;
			}
			$(this).addClass("video-active").siblings().removeClass("video-active");
			$(".video-definition-button span").html($(this).html());
			var duration=meido.currentTime;
			meido.canplay=false;
			meido.pause();
			meido.src=datasrc+$(this).html()+".mp4";
			meido.currentTime=duration;
		});
	});
})