function play_v1(video){ video.muted=false; } (function(){ var config={ site_domain:'//huijieshao.com/', videoOther:'http://video.xiuke.258jituan.com/flash/b/65.flv', //url videoPhone:'http://video.xiuke.258jituan.com/flash/b/65sj.mp4', //url2 videoCanvas:'http://video.xiuke.258jituan.com/flash/b/65kt.mp4', //url3 videoWebm:'http://video.xiuke.258jituan.com/flash/b/65.webm', //url4 width:'292', height:'460', position:'top', rand:'99466575', //随机数 is_follow:'0', //是否跟随页面滚动 videoImg:'http://video.xiuke.258jituan.com/flash/b/65sj.jpg', //封面图 playNum: '3', //播放次数 leftRigth:'-305', //左右边距 topBottom:'110' //上下边距 }; config.positionType=config.is_follow=='0'?'absolute':'fixed'; config.leftRigth=parseInt(config.leftRigth); config.topBottom=parseInt(config.topBottom); config.width=parseInt(config.width); config.height=parseInt(config.height); config.playNum=parseInt(config.playNum); var rand='?v='+config.rand; config.videoOther+=rand; config.videoPhone+=rand; config.videoCanvas+=rand; config.videoWebm+=rand; var swfHeight=false; var videoType=myBrowser(); var displayWebm="block", displayCanvas="none", autoPlay="autoplay muted"; width=config.width; height=config.height; if(document.documentElement.clientWidth<640){ width/=2; height/=2; } var htmlStr=''; //videoType="swf"; if(videoType=='webm'){ videoUrl=config.videoWebm; videoType='webm'; htmlStr='\ \

\ \ \ \ \ \

\ ' } else if(videoType=='canvas'){ videoUrl=config.videoCanvas; displayWebm="none"; displayCanvas="block"; htmlStr='\ \ \ \

\ \ \ \ \ \

\ ' } else if(videoType=='mp4'){ videoUrl=config.videoPhone; autoPlay=""; displayWebm="block"; displayCanvas="none"; htmlStr='\
\ \ \ \
\
\ ' } else{ videoUrl=config.videoOther; swfHeight=config.height+(config.width/config.height)*48*2; htmlStr='\
\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ 获得 Adobe Flash Player\ \ \ \ \ \ ' } var positionStyle, leftCenter=document.documentElement.clientWidth/2-config.width/2, topCenter=(document.documentElement.clientHeight/2-config.height/2-20); leftCenter+=config.leftRigth; topCenter+=config.topBottom; var chazhi=0; if(document.documentElement.clientWidth<640){ chazhi=56; chazhi=0; } switch(config.position){ case 'lb': positionStyle='left:'+config.leftRigth+'px;bottom:'+(config.topBottom+chazhi)+'px;'; break; case 'lt': positionStyle='left:'+config.leftRigth+'px;top:'+config.topBottom+'px;'; break; case 'rb': positionStyle='right:'+(-config.leftRigth)+'px;bottom:'+(-config.topBottom+chazhi)+'px;'; break; case 'rt': positionStyle='right:'+(-config.leftRigth)+'px;top:'+config.topBottom+'px;'; break; case 'top': positionStyle='left:'+leftCenter+'px;top:'+config.topBottom+'px;'; break; case 'bottom': positionStyle='left:'+leftCenter+'px;bottom:'+(-config.topBottom+chazhi)+'px;'; break; case 'center': positionStyle='left:'+leftCenter+'px;top:'+topCenter+'px;'; break; } var swfWh=videoType=='swf'?('width:'+config.width+'px;height:'+(swfHeight?swfHeight:(config.height+32))+'px'):''; var html='\ \ \
'+htmlStr+'
\ '; var dom_html=document.createElement('div'); dom_html.innerHTML=html; document.getElementsByTagName("body")[0].appendChild(dom_html); var video = document.getElementById("videoBottom"), outputCanvas = document.getElementById('output'), output, bufferCanvas = document.getElementById('buffer'), buffer, widthV, heightV, interval; if(videoType=='canvas'){ buffer = bufferCanvas.getContext('2d'); output = outputCanvas.getContext('2d'); widthV = outputCanvas.width; heightV = outputCanvas.height; } function processFrame() { buffer.drawImage(video, 0, 0); var image = buffer.getImageData(0, 0, widthV, heightV); var imageData = image.data; alphaData = buffer.getImageData(0, heightV, widthV, heightV).data; for (var i = 3, len = imageData.length; i < len; i = i + 4) { imageData[i] = alphaData[i-1]; } output.putImageData(image, 0, 0, 0, 0, widthV, heightV); } if(videoType!='swf'){ var videoStart=document.getElementById('videoStart'), videoStop=document.getElementById('videoStop'), videoVoiceEsc=document.getElementById('videoVoiceEsc'), videoVoiceOpen=document.getElementById('videoVoiceOpen'); video.addEventListener('play', function() { clearInterval(interval); if(videoType=='canvas')interval = setInterval(processFrame, 70); try{ videoStart.style.display="none"; videoStop.style.display="block"; }catch(e){} if(config.playNum<=0&&videoType!="mp4"){ videoStop.click(); } else{ config.playNum--; } event.preventDefault(); }, false); video.addEventListener('ended', function() { videoVoiceEsc.click(); clearInterval(interval); if(config.playNum>0){ video.play(); } else{ videoStop.click(); } }, false); if(videoType!='mp4'){ videoStop.addEventListener('click', function(event) { video.pause(); videoStart.style.display="block"; videoStop.style.display="none"; event.preventDefault(); }, false); videoVoiceEsc.addEventListener('click',function(){ video.volume=0; videoVoiceOpen.style.display="block"; videoVoiceEsc.style.display="none"; video.muted=false; }); videoVoiceOpen.addEventListener('click',function(){ video.volume=1; videoVoiceOpen.style.display="none"; videoVoiceEsc.style.display="block"; video.muted=false; }); videoStart.addEventListener('click', function(event) { config.playNum++; video.play(); event.preventDefault(); }, false); } else{ videoStart.addEventListener('click', function(event) { video.play(); document.getElementById('videoMp4Bg').remove(); }, false); } document.getElementById('videoEsc').addEventListener('click',function(event){ document.getElementById('videoCon').remove(); }); } else{ var swfEsc=document.getElementById('swfEsc'); if(swfEsc.addEventListener){ swfEsc.addEventListener('click',function(){ escVideoXiuke(); }); } else{ swfEsc.attachEvent('onclick',function(){ escVideoXiuke(); }); } } var dh={}; dh.dom=document.getElementById('videoCon'); dh.domUp=document; /*事件添加统一调用函数*/ dh.xy=function(e){//获取xy坐标 var x = e.pageX;//dh.sf为画布缩放比例(重要) var y =e.pageY; if(!x){ x=event.clientX; y=event.clientY; } //var x = e.layerX/dh.sf; //var y = e.layerY/dh.sf; return {x:x,y:y}; } var funXy=function(e,fun){ var xy=dh.xy(e); var x=xy.x, y=xy.y; var ret=0; try{ ret=fun(x,y,e); } catch(e){} return ret; } dh.down=function(fun,dom){ dom=dom?dom:dh.dom; dh.down.fun=function(e){ if(e.targetTouches){ e=e.targetTouches[0]; } if(funXy(e,fun)!==false)dh.down.isGo=true; }; if(dom.addEventListener){ dom.addEventListener('touchstart',dh.down.fun); dom.addEventListener('mousedown',dh.down.fun); } else{ dom.attachEvent('onmousedown',dh.down.fun); } } dh.move=function(fun,downGo,dom){ dom=dom?dom:dh.dom; dh.move.fun=function(e){ e.preventDefault&&e.preventDefault(); if(e.targetTouches){ e=e.targetTouches[0]; } if(downGo){ dh.down.isGo&&funXy(e,fun); } else{ funXy(e,fun); } }; if(dom.addEventListener){ dom.addEventListener('touchmove',dh.move.fun); dom.addEventListener('mousemove',dh.move.fun); } else{ dom.attachEvent('onmousemove',dh.move.fun); } }; dh.up=function(fun,dom){ dom=dom?dom:dh.dom; dh.up.fun=function(e){ dh.down.isGo=false; funXy(e,fun); }; if(dom.addEventListener){ dom.addEventListener('touchend',dh.up.fun); dom.addEventListener('mouseup',dh.up.fun); } else{ dom.attachEvent('onmouseup',dh.up.fun); } } dh.down(function(x,y){ dh.leftGo=x; dh.topGo=y; dh.leftPx=dh.dom.offsetLeft; dh.topPx=dh.dom.offsetTop; try{ dh.dom.style.right='initial'; dh.dom.style.bottom='initial'; }catch(e){} dh.dom.style.left=dh.leftPx+'px'; dh.dom.style.top=dh.topPx+'px'; dh.dom.style.transition="none"; maxHeight=document.body.scrollHeight; }); dh.move(function(x,y,e){ var xm=x-dh.leftGo; var ym=y-dh.topGo; dh.dom.style.left=(xm+dh.leftPx)+'px'; dh.dom.style.top=(ym+dh.topPx)+'px'; },true); var maxHeight=document.body.scrollHeight; dh.up(function(x,y,e){ var maxw=document.documentElement.clientWidth, maxh=document.documentElement.clientHeight; if(config.is_follow=='0'){ maxh=maxHeight; } var t=dh.dom.offsetTop, l=dh.dom.offsetLeft; var w=dh.dom.clientWidth, h=dh.dom.clientHeight; dh.dom.style.transition="all 0.3s"; if(t<0){ dh.dom.style.top='0px'; } else if((t+h)>maxh){ dh.dom.style.top=(maxh-h)+'px'; } if(l<0){ dh.dom.style.left='0px'; } else if((l+w)>maxw){ dh.dom.style.left=(maxw-w)+'px'; } },dh.domUp); function myBrowser(){ //return "webm"; var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 if (document.documentElement.clientWidth<640) { return 'mp4'; } else if (userAgent.indexOf("Edge") > -1) { return "canvas"; } else if (userAgent.indexOf("Chrome") > -1) { return "webm"; } else if(userAgent.indexOf("Safari") > -1){ return "canvas"; } else if (userAgent.indexOf("Firefox") > -1) { return "webm"; } else{ return "swf"; } } window.escVideoXiuke=function(){ var con=document.getElementById('videoCon'); con.style.display='none'; con.innerHTML=''; } var mouse=function(){ document.getElementById('videoBottom').play(); document.getElementsByTagName('body')[0].removeEventListener('mousedown',mouse); } setTimeout(function(){ document.getElementsByTagName('body')[0].addEventListener('mousedown',mouse); },2000); })();