TPlayer

├── .gitignore ├── .project ├── 1.flv ├── README.md ├── dist └── tplayer.js ├── favicon.ico ├── index.html ├── logo-small.png ├── node └── index.js ├── package-lock.json ├── package.json ├── src ├── html.js ├── img │ ├── set.png │ ├── sound.png │ ├── tdlogo.png │ ├── vloop1.png │ └── vloop2.png ├── index.js └── style.css └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tplayer-master 4 | 5 | 6 | 7 | 8 | 9 | com.aptana.editor.php.aptanaPhpBuilder 10 | 11 | 12 | 13 | 14 | com.aptana.ide.core.unifiedBuilder 15 | 16 | 17 | 18 | 19 | 20 | com.aptana.projects.webnature 21 | com.aptana.editor.php.phpNature 22 | 23 | 24 | 25 | 1510747109006 26 | 27 | 26 28 | 29 | org.eclipse.ui.ide.multiFilter 30 | 1.0-name-matches-false-false-node_modules 31 | 32 | 33 | 34 | 1512817811534 35 | 36 | 26 37 | 38 | org.eclipse.ui.ide.multiFilter 39 | 1.0-name-matches-false-false-node_modules 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /1.flv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haocity/Tplayer/638ae50a7c4467c4fbbe668d0d18776ce7a0e3f4/1.flv -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HAOTOWN TPlayer 2 | ![image](https://ooo.0o0.ooo/2016/12/16/585359df46d72.png) 3 | 4 | CSS3+Javascript 本项目是一款基于css3和js弹幕系统。 5 | 6 | 未全部完善 7 | 8 | [DEMO](https://haocity.github.io/Tplayer/) 9 | 10 | ![image](https://ooo.0o0.ooo/2016/12/20/5858df24293f5.png) 11 | 12 | ## 使用方式 13 | 引用播放器样式表 14 | ``` 15 | 16 | ``` 17 | 引用Tplayer.js文件 18 | ``` 19 | 20 | ``` 21 | 执行 22 | ``` 23 | Tplayer(Element,videourl,videoposter,danmuserver,danmuid,videotype); 24 | ``` 25 | 26 | | Field | Type | Description | 27 | | ------------------ | --------------------- | ---------------------------------------- | 28 | | `Element` | `Element Object` | 要插入播放器的元素 | 29 | | `videourl` | `String` | 视频播放地址 | 30 | | `videoposter` | `String` | 视频封面地址 | 31 | | `videourl` | `String` | 弹幕服务器地址 | 32 | | `danmuid` | `Int` | 弹幕ID | 33 | | `videotype` | `String` | 视频格式支持flv与mp4 使用flv时需引用flv.js | 34 | 35 | 36 | 后端 `node` 37 | 38 | [flv.js github](https://github.com/Bilibili/flv.js/) 39 | 40 | [flv.js CDN bootcdn.cn](http://www.bootcdn.cn/flv.js/) 41 | -------------------------------------------------------------------------------- /dist/tplayer.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(n){if(i[n])return i[n].exports;var o=i[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var i={};t.m=e,t.c=i,t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=function(){function e(e,t){for(var i=0;i正在为你切换清晰度..',time:3e3,padding:"6px 10px",opacity:"0.9"}),i.ele.definition.querySelector("span").innerHTML=i.Definition(this.v);var e=i.Element.currentTime,t=new Hls;t.loadSource(this.vsrc),t.attachMedia(i.Element),t.on(Hls.Events.MANIFEST_PARSED,function(){var t=!0;i.Element.addEventListener("canplay",function(){t&&(t=!1,i.tiao(e))}),i.Element.style.display="block"})},!1),c.innerHTML=i.Definition(c.v),d.appendChild(c)}l||(a[0].v1?l=a[0].v1:a[0].v2?l=a[0].v2:a[0].v3?l=a[0].v3:a[0].v4&&(l=a[0].v4)),this.videosrcarr=[l.m3u8],this.ele.definition.querySelector("span").innerHTML=i.Definition(l.v),this.ele.definition.appendChild(d),this.ele.definition.style.display="block",this.ele.definition.ul=this.ele.definition.querySelector("ul"),this.ele.definition.ul.style.display="none",this.ele.definition.addEventListener("click",function(){"block"==i.ele.definition.ul.style.display?i.ele.definition.ul.style.display="none":i.ele.definition.ul.style.display="block"})}else"string"==typeof this.options.video.url?this.videosrcarr=new Array(this.options.video.url):this.videosrcarr=this.options.video.url;if("flv"==this.options.video.type){for(var h=document.createElement("video"),u=new Array,f=0;f=0;s--)a[s].parentNode.removeChild(a[s])}}}(n);this.ele.tp_up.addEventListener("click",function(){if(t.ele.tp_text.value){t.send(t.ele.tp_text.value,t.ele.tp_color_bo.style.backgroundColor,t.dmplace,1),t.ele.tp_text.readonly="readonly",t.ele.tp_up.disabled="true",t.ele.tp_up.style.background="#777479",setTimeout(function(){t.ele.tp_text.value="",t.ele.tp_up.disabled="",t.ele.tp_up.style.background="#8715EF"},500);var e={id:t.options.danmakuid,text:t.ele.tp_text.value,color:t.ele.tp_color_bo.style.backgroundColor,time:parseInt(10*t.getnowtime()),place:t.dmplace};e=function(e){var t="";for(var i in e)t+=i+"="+e[i]+"&";return t}(e);var i=new XMLHttpRequest;i.open("POST",t.options.danmakuapi+"send/",!0),i.setRequestHeader("Content-type","application/x-www-form-urlencoded"),i.onreadystatechange=function(){var e=i;if(4==e.readyState&&200==e.status){var t=e.responseText;console.log(t)}},i.send(e)}}),this.ele.tp_text.onkeydown=function(e){var i=e||window.event||arguments.callee.caller.arguments[0];13==i.keyCode?t.ele.tp_up.click():32==i.keyCode&&i.stopPropagation()},this.ele.danmaku_switch.addEventListener("click",function(){"tp-danmaku-switch"==this.className?(this.className="tp-danmaku-switch tp-danmaku-switch-c",t.ele.danmaku_warp.style.opacity=0):(this.className="tp-danmaku-switch",t.ele.danmaku_warp.style.opacity=null)}),this.ele.setr5.onclick=function(){this.checked?(t.removaldata?t.nowdata=t.removaldata:t.removaldanmaku(),t.config.qc=!0):(t.nowdata=t.data.slice(0),t.config.qc=!1),localStorage.setItem("tdconfig",JSON.stringify(t.config))},this.ele.setr6.onclick=function(){this.checked?(t.shielddanmaku(),t.config.pb=!0):(t.nowdata=t.data.slice(0),t.config.pb=!1),t.config.pbs=t.ele.setr7.value,localStorage.setItem("tdconfig",JSON.stringify(t.config))},this.ele.setr7.addEventListener("keydown",function(e){var t=e||window.event||arguments.callee.caller.arguments[0];t.keyCode&&t.stopPropagation()}),this.ele.setr7.onchange=function(){t.ele.setr6.checked&&t.shielddanmaku()},this.ele.setr8.onchange=function(){var e=this.selectedIndex+1;t.config.definition=e},this.ele.setr7.value=t.config.pbs,this.ele.setr1.onchange=t.changerset.bind(t),this.ele.setr2.onchange=t.changerset.bind(t),this.ele.setclose.addEventListener("click",function(){t.changerset.bind(t),t.config.pbs=t.ele.setr7.value,localStorage.setItem("tdconfig",JSON.stringify(t.config)),d(t.ele.setbox,"tp-zoomoutdown"),setTimeout(function(){t.ele.setbox.style.display="none",p(t.ele.setbox,"tp-zoomoutdown")},480)},!1),this.ele.setbtn.addEventListener("click",function(){"block"!=t.ele.setbox.style.display?(t.ele.setbox.style.display="block",d(t.ele.setbox,"tp-zoomoutup"),setTimeout(function(){t.ele.setbox.className="tp-video-set"},480)):"tp-video-set"==t.ele.setbox.className&&t.ele.setclose.click()},!1),this.ele.setr3.onclick=function(){this.checked?t.config.dmweight=600:t.config.dmweight=400,t.changerconfig()},this.ele.setr4.onclick=function(){this.checked?t.config.dmshadow=0:t.config.dmshadow=2,t.changerconfig()},this.ele.video_control_play.addEventListener("click",function(){t.play()}),this.ele.tp_oneplay.addEventListener("animationend",function(){p(this,"tp-zoomoutdown"),this.style.display="none"},!1),this.ele.tp_oneplay.addEventListener("webkitAnimationEnd",function(){p(this,"tp-zoomoutdown"),this.style.display="none"},!1),this.ele.video_control_paused.addEventListener("click",function(){t.pause()}),this.ele.tp_oneplay.addEventListener("click",function(){d(this,"tp-zoomoutdown"),t.play()}),this.ele.danmaku_warp.addEventListener("mousemove",function(){this.time&&clearTimeout(this.time),t.ele.danmaku_warp.style.cursor="auto",this.time=setTimeout(function(){t.ele.danmaku_warp.style.cursor="none"},3e3)}),this.ele.danmaku_warp.addEventListener("touchend",function(){1!=e.istouch&&e.istouch;var t=e.ele.video_con;"block"==t.style.display?(t.style.display="none",e.Element.paused?e.play():e.pause()):(t.style.display="block",e.Element.paused||e.pause())}),this.ele.alert_ok.addEventListener("click",function(){t.ele.alert.style.display="none"},!1),this.ele.screenshot.addEventListener("click",function(){t.ele.tp_rightmenu.style.display="none",t.screenshot()},!1),this.sound=this.config.sound,this.sound?(this.ele.tp_s.style.width=this.sound+"%",this.Element.volume=.01*parseInt(this.ele.tp_s.style.width)):(this.ele.tp_s.style.width="80%",this.changersound()),this.ele.vloop.onclick=function(){t.vloop?(t.vloop=!1,this.className="tp-vloop tp-vloop1"):(t.vloop=!0,this.className="tp-vloop tp-vloop2")},this.ele.tp_s_w.addEventListener("click",function(e){var i=e||window.event||arguments.callee.caller.arguments[0],n=100*t.show_coords(i,this).xbl;t.ele.tp_s.style.width=n+"%",t.changersound()},!1),this.Element.addEventListener("timeupdate",function(){var e=t.getnowtime();t.Element.currentTime;t.ele.tranger_a.style.width=e/t.alltime*100+"%";for(var i=t.Element.buffered,n=t.nowduan-1,o=0,a=0,s=0;s<=n;s++)o+=t.videotimearr[s];i.length&&(a=o+i.end(i.length-1));var r=a/t.alltime*100+"%";t.ele.tranger_c.style.width!=r&&(t.ele.tranger_c.style.width=r)},!1),setInterval(function(){e.width=e.ele.tplayer_main.offsetWidth,e.height=e.ele.tplayer_main.offsetHeight;var i=e.getnowtime(i);t.videoelearr[e.nowduan].currentTime+20>=t.videotimearr[e.nowduan]&&e.videoelearr[e.nowduan+1]&&"auto"!=e.videoelearr[e.nowduan+1].preload&&(e.videoelearr[e.nowduan+1].preload="auto",console.log("当前正在播放第"+e.nowduan+"段，正在加载下一段")),e.ele.nowtime.innerHTML=e.getvideotime(i).m+":"+e.getvideotime(i).s},1e3),this.ele.tranger.addEventListener("mousemove",function(e){if(this.last||(this.last=e.x,this.w=this.offsetWidth,this.w2=t.getLeft(this),this.t=t.getTop(this)),this.last-e.x>4||this.last-e.x<-4){t.ele.tip.style.left=e.x-22+"px",t.ele.tip.style.top=this.t-27-document.documentElement.scrollTop+"px";var i=(e.x-this.w2)/this.w,n=t.alltime*i,o=t.getvideotime(n);t.ele.tip.innerHTML=o.m+":"+o.s}}),this.ele.tranger.addEventListener("mouseleave",function(){t.ele.tip.style.display="none"}),this.ele.tranger.addEventListener("mouseenter",function(){t.ele.tip.style.display="block"}),this.ele.tranger.onmousedown=function(e){var i=e||window.event||arguments.callee.caller.arguments[0],n=t.show_coords(i,this);t.ele.tranger_a.style.width=100*n.xbl+"%",t.tiao(n.xbl*t.alltime)};for(var o=0;o=0;s-=25)for(var r=0;r<=255;r+=25)for(var l=0;l<=255;l+=25)a.arr.push("rgb("+s+","+r+","+l+")");var c=this.ele.tp_con,h=this.ele.tp_color_warp;for(this.ele.tp_color_bo.addEventListener("click",function(){"block"==c.style.display?c.style.display="none":c.style.display="block"}),a.i=0;a.i1?(t.ele.tplayer.style.transform="scale("+1/n+",1)",t.ele.tplayer.style.webkitTransform="scale("+1/n+",1)"):(t.ele.tplayer.style.transform="scale(1,"+n+")",t.ele.tplayer.style.webkitTransform="scale(1,"+n+")"),this.innerText="视频比例 4:3"}else if(2==this.ratio){this.ratio=3;var o=.5625*i/e;o>1?(t.ele.tplayer.style.transform="scale("+1/o+",1)",t.ele.tplayer.style.webkitTransform="scale("+1/o+",1)"):(t.ele.tplayer.style.transform="scale(1,"+o+")",t.ele.tplayer.style.webkitTransform="scale(1,"+o+")"),this.innerText="视频比例 16:9"}else if(3==this.ratio){this.ratio=4,this.innerText="视频比例全屏",t.ele.tplayer.style.transform="none",t.ele.tplayer.style.webkitTransform="none";for(var a=0;a0&&document.addEventListener("scroll",function(){(document.documentElement.scrollTop||document.body.scrollTop)>=e.options.srollfixe?e.ele.tp_video_warp.className="tp-video-warp tp-video-warp-fixed":e.ele.tp_video_warp.className="tp-video-warp"})}},{key:"$c",value:function(e){return this.warp.querySelectorAll(e)}},{key:"getthis",value:function(){return this}},{key:"play",value:function(){d(this.ele.tp_oneplay,"tp-zoomoutdown"),0==this.dsq&&(this.Interval=setInterval(function(){this.danmakutime()}.bind(this),100),this.dsq=1),1!=this.istouch&&(this.ele.video_con.style.opacity="0");var e=this.ele.danmaku_warp.getElementsByTagName("div");this.ele.video_control_play.style.display="none",this.ele.video_control_paused.style.display="inline-block",this.Element.play();for(var t=e.length-1;t>=0;t--)p(e[t],"tp-suspend")}},{key:"pause",value:function(){clearInterval(this.Interval),this.dsq=0;var e=this.ele.danmaku_warp.getElementsByTagName("div");this.ele.video_control_paused.style.display="none",this.ele.video_control_play.style.display="inline-block",this.Element.pause();for(var t=e.length-1;t>=0;t--)d(e[t],"tp-suspend");this.ele.tp_spinner.style.display="none"}},{key:"addacfundanmu",value:function(e){var t=this;fetch("http://danmu.aixifan.com/size/"+e).then(function(e){return e.json()}).then(function(i){for(var n=Math.ceil(i[2]/2e3),o=0,a=0,s=1;s<=n;s++)!function(i){fetch("http://danmu.aixifan.com/V3/"+e+"/"+i+"/2000").then(function(e){return e.json()}).then(function(e){for(var s=0;s=0;o--)l(n[o],"tp-left")&&(n[o].style.transform="translateX(-"+this.width/this.config.danmakusize+"px)");this.ele.video_ratio.ratio=4,this.ele.video_ratio.click()}}},{key:"changerconfig",value:function(){this.config.definition=this.config.definition||1,this.config.v=this.config.v||this.width/100,this.config.danmakusize=this.config.danmakusize||1,this.config.danmakuo=this.config.danmakuo||1,this.config.dmweight=this.config.dmweight||600,this.config.sound=this.config.sound||80,this.config.pbs=this.config.pbs||"笑容我来守护,隔壁难民",1!=this.config.qc&&(this.config.qc=!1),1!=this.config.pb&&(this.config.pb=!1),0!=this.config.dmshadow&&(this.config.dmshadow=3);var e="";this.config.dmshadow&&(e="text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;");var t=this.options.Element;this.ele.css.innerHTML=t+" .tp-left {animation: dmleft "+this.config.v+"s linear;-webkit-animation: dmleft "+this.config.v+"s linear;}"+t+" .danmaku-warp{font-weight:"+this.config.dmweight+";transform:scale("+this.config.danmakusize+");-webkit-transform:scale("+this.config.danmakusize+");-moz-transform:scale("+this.config.danmakusize+");width:"+100/this.config.danmakusize+"%;height:"+100/this.config.danmakusize+"%;opacity:"+this.config.danmakuo+"}"+t+" .tp-video-main>.danmaku-warp>.danmaku{"+e+"}";for(var i=this.$c(".tp-left"),n=0;n0)i.i--,i.innerHTML=i.i+"秒后将播放下一段";else{clearInterval(a),console.log("播放下一段");for(var t=o.warp.childNodes,n=0;n=10?parseInt(e%60):"0"+parseInt(e%60),{m:i,s:t}}},{key:"shielddanmaku",value:function(){var e=this.ele.setr7.value.split(","),t=void 0,i=0;if(this.ele.setr5.checked){this.removaldata||this.removaldanmaku();t=this.removaldata.slice(0)}else{t=this.data.slice(0)}for(var n=t.length-1;n>=0;n--)if(t[n]&&t[n].text)for(var o=e.length-1;o>=0;o--)t[n]&&t[n].text.indexOf(e[o])>-1&&(delete t[n],i++);this.nowdata=t;for(var a=this.$c(".danmaku-warp>.danmaku"),s=0;s-1&&(a[s].innerText=null);console.log(e),console.log("弹幕屏蔽屏蔽"+i+"个弹幕")}},{key:"danmakuhide",value:function(e,t){e&&e.parentNode&&e.parentNode.removeChild(e),void 0!==t&&(this.toparr[t]=0)}},{key:"getlefttop",value:function(e,t){for(var i=void 0,n=this.getnowtime(),o=(this.width,0);o<=this.leftarr.t.length;o++)if(!this.leftarr.leaving[o]){if(this.leftarr.v[o]>=e){i=o;break}if(!this.leftarr.t[o])break;var a=this.width/100-n+this.leftarr.t[o],s=a*(e-this.leftarr.v[o]),r=(n-this.leftarr.t[o])*this.leftarr.v[o]-this.leftarr.width[o]-20;if(s=0;i--)for(var n=e.length-1;n>=0&&n!=i;n--)e[i]&&e[n]&&e[i].text==e[n].text&&(delete e[n],t++);this.removaldata=e,this.nowdata=this.removaldata,console.log("弹幕去重去除"+t+"个重复弹幕")}}},{key:"changerset",value:function(){var e=this.ele;this.config.danmakuo=parseInt(e.setr1.value)/100,this.config.danmakusize=parseInt(e.setr2.value)/50,this.changerconfig()}},{key:"showbar",value:function(){this.bar&&clearTimeout(this.bar),"1"!=this.ele.video_con.style.opacity&&(this.ele.video_con.style.opacity="1");var e=this;this.bar=setTimeout(function(){e.ele.video_con.style.opacity="0"},3e3)}},{key:"danmakutime",value:function(){var e=this.getnowtime();if(this.nowdata){for(var t=parseInt(10*e),i=0;i=e)return i}},{key:"tdplay",value:function(){if(this.ele.tp_spinner.style.display="block"){0==this.dsq&&(this.Interval=setInterval(function(){this.danmakutime()}.bind(this),100),this.dsq=1);var e=this.ele.danmaku_warp.getElementsByTagName("div");this.ele.tp_spinner.style.display="none",this.ele.alltime.innerHTML=this.getvideotime(this.alltime).m+":"+this.getvideotime(this.alltime).s;for(var t=e.length-1;t>=0;t--)p(e[t],"tp-suspend")}}},{key:"getTop",value:function(e){var t=e.offsetTop;return null!=e.offsetParent&&(t+=this.getTop(e.offsetParent)),t}},{key:"getLeft",value:function(e){var t=e.offsetLeft;return null!=e.offsetParent&&(t+=this.getLeft(e.offsetParent)),t}},{key:"show_coords",value:function(e,t){var i=e.clientX-this.getLeft(t),n=e.clientY-this.getTop(t),o=i/t.offsetWidth,a=1-n/t.offsetHeight;return{x:i,y:n,w:t.offsetWidth,h:t.offsetHeight,xbl:o,ybl:a}}},{key:"videohc",value:function(){console.log("loding"),clearInterval(this.Interval),this.dsq=0,this.ele.tp_spinner.style.display="block";for(var e=this.ele.danmaku_warp.getElementsByTagName("div"),t=e.length-1;t>=0;t--)d(e[t],"tp-suspend")}},{key:"alert",value:function(e){var t=this.ele.alert;clearTimeout(t.t),t.style.display="block",e.w=e.w||"auto",e.h=e.h||"auto",e.time=e.time||1e3,e.padding=e.padding||"20px",e.opacity=e.opacity||1,e.btn?this.ele.alert_ok.style.display="block":(this.ele.alert_ok.style.display="none",t.t=setTimeout(function(){t.style.display="none"},e.time)),"object"==o(e.t)?(this.ele.alert_container.innerHTML=null,this.ele.alert_container.appendChild(e.t)):this.ele.alert_container.innerHTML=e.t,this.ele.alert_container.style.padding=e.padding,t.style.opacity=e.opacity,this.ele.alert.style.display="block"}},{key:"screenshot",value:function(){var e=document.createElement("canvas");e.width=this.ele.tplayer.offsetWidth,e.height=this.ele.tplayer.offsetHeight,e.getContext("2d").drawImage(this.videoelearr[this.nowduan],0,0,e.width,e.height),e.className="tp-screenshot-canvas";var t=document.createElement("div");t.innerHTML="

请右键保存截图

",t.appendChild(e),this.alert({t:t,btn:!0})}},{key:"changersound",value:function(){for(var e=.01*parseInt(this.ele.tp_s.style.width),t=0;t'+this.config.sound+"%",time:1e3,padding:"6px 10px",opacity:"0.9"}),localStorage.setItem("tdconfig",JSON.stringify(this.config))}},{key:"tp_menu",value:function(e){var t=this,i=this.ele.tplayer,n=this.ele.tp_rightmenu;if(1!=this.istouch){var o=e.target||e.srcElement;l(o,"danmaku")?(this.ele.copytext.innerHTML=o.innerHTML,this.ele.copy.style.display="block",this.ele.copy.onclick=function(){t.ele.copytext.select(),document.execCommand("Copy"),n.style.display="none"}):this.ele.copy.style.display="none",n.style.display="block";var a=void 0,s=void 0,r=this.ele.danmaku_warp.offsetHeight,d=this.ele.danmaku_warp.offsetWidth;if(r==document.documentElement.clientHeight)s=e.clientY,a=e.clientX,a+n.offsetWidth>d&&(a=d-n.offsetWidth),s+n.offsetWidth>r&&(s=r-n.offsetHeight);else{s=e.clientY+document.documentElement.scrollTop-this.getTop(this.ele.tplayer),a=e.clientX-this.getLeft(this.ele.tplayer);var p=i.offsetWidth,c=i.offsetHeight;a+n.offsetWidth>p&&(a=p-n.offsetWidth),s+n.offsetHeight>c&&(s=c-n.offsetHeight)}n.style.top=s+"px",n.style.left=a+"px"}}},{key:"changermode",value:function(e){}},{key:"tiao",value:function(e){for(var t=this.getduan(e)-1,i=0,n=0;n<=t;n++)i+=this.videotimearr[n];var o=e-i;this.nowduan=this.getduan(e);for(var a=0;a\n

\n 复制弹幕\n
播放速度\n
- 0.5
- 0.75
- 正常
- 1.25
- 1.5
- 2
\n
清晰度
视频比例默认
截图

意见反馈

About tplayer

\n \n

确定

设置

\n ×\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

弹幕透明度
弹幕缩放
弹幕加粗	关闭阴影
合并重复弹幕
屏蔽弹幕
优先画质	\n \n
\n 意见反馈&&协助开发&&指导请联系QQ 1051667334 \n 技术水平有限感谢你的使用 \n

\n \n

◀滚动弹幕

\n 0:00

弹

\n ♫\n

\n \n

\n \n \n 0:00\n / 0:00

1:00

\n \n\n'},test:function(){return console.log("ok")}};e.exports=n},function(e,t,i){var n=i(3);"string"==typeof n&&(n=[[e.i,n,""]]);var o={hmr:!0};o.transform=void 0;i(10)(n,o);n.locals&&(e.exports=n.locals)},function(e,t,i){t=e.exports=i(4)(void 0),t.push([e.i,".tplayer{height:100%;width:100%}.tp-video-warp.tp-video-warp-fixed{position:fixed;right:10px;top:10px;width:360px;height:230px;z-index:99}.tp-video-warp.tp-video-warp-fixed .tp-control{display:none!important}.tp-video-warp p{margin:0}.tp-video-warp ul{margin:0;padding:0}.tp-video-warp{font-size:14px}.tp-tip{display:none;position:fixed;left:145px;background-color:#5f5f5f7d;line-height:18px;padding:4px 6px;top:-9px;border-radius:4px}.video-end{position:absolute;height:100%;width:100%;z-index:8;background:#000 url("+i(5)+") no-repeat right 40px bottom 30px;display:none;opacity:1;animation:tpshow 3s;-webkit-animation:tpshow 3s}@keyframes tpshow{0%{opacity:0}to{opacity:1}}@-webkit-keyframes tpshow{0%{opacity:0}to{opacity:1}}.video-end>.replay{position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;transition:transform 2s;-moz-transition:transform 2s;-webkit-transition:transform 2s}.video-end>.replay:hover{transform:rotate(1turn);-webkit-transform:rotate(1turn);-moz-transform:rotate(1turn)}.tp-video-main>.danmaku-warp>.danmaku{color:#fff;line-height:37px;z-index:6;padding:0 4px;font-family:Avenir Next,Helvetica,Arial,Lantinghei SC,Microsoft YaHei,sans-serif}.tp-left{will-change:transform;right:0;font-size:24px;animation:dmleft 10s linear;-webkit-animation:dmleft 10s linear;cursor:pointer}.tp-left,.tp-top{position:absolute;white-space:nowrap}.tp-top{left:50%;text-align:center;display:block;font-size:22px;transform:translateX(-50%);-webkit-transform:translateX(-50%)}.danmaku-ad{position:absolute;white-space:nowrap;-webkit-transform:translate(50%,50%);-moz-transform:translate(50%,50%);transform:translate(50%,50%)}@keyframes dmleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@-webkit-keyframes dmleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}}.danmaku-warp{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;transform-origin:top left;-moz-transform-origin:top left;-webkit-transform-origin:top left}.tp-send{position:absolute;left:50%;width:60%;height:35px;border-radius:5px;margin:0 0 0 -30%;text-align:center;padding:4px 0;background-color:hsla(0,0%,100%,.79);z-index:6;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.tp-text{width:100%;line-height:36px;height:36px;border:none;text-align:center;background-color:transparent;outline:none}.tp-up{display:none;position:relative;left:20px;background-color:#8715ef;color:#fff;border:0 solid #000;line-height:20px;border-radius:4px;padding:3px 20px}.tp-msg{position:absolute;bottom:60px;right:6px;background-color:hsla(0,0%,100%,.95);padding:6px 10px;z-index:999;border-radius:6px}.tp-msg>.tp-msg-close{cursor:pointer;color:#000;font-weight:600;font-size:1.4em;line-height:18px;padding-right:8px;font-size:15px}.tp-video-main{background-color:#000;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden}.tp-video,.tp-video-main{position:absolute;width:100%;height:100%}.tp-video{left:0;right:0;bottom:0;top:0;margin:auto}.tp-video-con{opacity:0;position:absolute;bottom:0;height:100px;width:100%;background:linear-gradient(0deg,rgba(0,0,0,.75),hsla(0,0%,100%,0));transition:opacity 1s;-moz-transition:opacity 1s;-webkit-transition:opacity 1s}.tp-video-con:hover{opacity:1!important}.tp-control{position:absolute;bottom:0;padding-bottom:10px;left:0;width:100%;height:45px;color:#fff;line-height:0;user-select:none;z-index:888}.tp-control-alltime,.tp-control-nowtime{cursor:default}.tp-icon{position:relative;top:6px;padding-left:10px;padding-right:2px;width:30px;height:30px;cursor:pointer;fill:#fff}.tp-definition{display:none}.tp-danmaku-switch{position:relative;display:inline-block;border:2px solid #fff;color:#fff;border-radius:50%;width:22px;height:22px;line-height:22px;font-size:14px;text-align:center;cursor:pointer}.tp-danmaku-switch-c{color:#000!important;border:none!important;background-color:#fff}.tp-vloop{display:inline-block;height:25px;width:25px;background-size:cover;transform:translateY(8px);cursor:pointer}.tp-vloop1{background-image:url("+i(6)+")}.tp-vloop2{background-image:url("+i(7)+")}.tp-set{background-image:url("+i(8)+");height:24px;width:24px;margin:0 14px;transform:translateY(8px)}.sound-ico,.tp-set{display:inline-block;background-size:cover;cursor:pointer}.sound-ico{background-image:url("+i(9)+");height:26px;width:26px;margin-right:5px;vertical-align:bottom}.tp-alert,.tp-video-set{display:none;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);z-index:999;background-color:hsla(0,0%,100%,.95);border-radius:5px;overflow:hidden;font-size:14px}.tp-video-set{width:400px;height:300px}.tp-alert-ok{width:50px;background-color:#e05865;color:#fff;padding:4px 10px;border-radius:5px;text-align:center;margin:5px auto;cursor:pointer}.tp-closeset{position:absolute;top:0;right:0;padding:4px;cursor:pointer;color:#000;font-weight:600;font-size:1.4em}.tp-alert-container{padding:20px}.tp-alert-container .tp-screenshot-canvas{height:auto;width:300px}.tp-settable{margin:0 auto;cursor:default}.tp-video-set>h4{margin:0 0 8px;padding:10px 20px;background-color:#f35d5d;color:#fff}.tp-syk{padding:10px;position:relative;display:inline-block;color:#fff;top:-7px;vertical-align:bottom}.tp-s-tranger{position:relative;height:10px;width:80px;margin-left:30px;top:10px;background-color:hsla(0,5%,53%,.6);border-radius:4px;cursor:pointer;overflow:hidden}.tp-s-tranger>.tp-s-tranger-a{position:absolute;left:0;top:0;width:10%;height:100%;background-color:#e33d3d;border-radius:4px 0 0 4px}.tp-tranger{position:relative;height:11px;background-color:rgba(0,0,0,.17);border-radius:6px;cursor:pointer;overflow:hidden;margin-top:18px;margin-left:80px;margin-right:170px}.tp-tranger>.tp-tranger-a{position:relative;display:inline-block;background-color:#f84949;height:100%;width:0;border-radius:6px;z-index:3}.tp-tranger>.tp-tranger-b{position:relative;display:inline-block;background-color:#fff;height:100%;width:11px;border-radius:50%;right:16px;z-index:5}.tp-tranger>.tp-tranger-c{position:absolute;top:0;width:0;height:100%;background-color:hsla(0,9%,79%,.47);border-radius:6px;z-index:2;overflow:hidden}.tp-syk-ico{position:absolute;top:22px;left:12px;font-size:1.6em;cursor:default}.tp-oneplay{width:120px;height:111px;z-index:999;background-color:#ea3e49;cursor:pointer;border-radius:10px}.tp-oneplay>svg{width:100px;height:100px;fill:#fff;margin-left:10px}.tp-acenter{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto}.tp-spinner{width:76px;height:40px;z-index:7;display:none}.tp-suspend{-webkit-animation-play-state:paused!important;animation-play-state:paused!important}.md-iframe{display:none}.tp-place2{background-color:#3b3b3b;margin:2px 0 4px;color:#fff;cursor:pointer}.tp-spinner>div{background-color:#fff;height:100%;width:6px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out;border:1px solid #dadada}.tp-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.tp-spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.tp-spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.tp-spinner .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-stretchdelay{0%,40%,to{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.video-full{width:20px;padding-right:30px;top:9px;position:relative;padding-left:10px;height:30px;cursor:pointer;fill:#fff}:-webkit-full-screen .tp-video-main{height:100%!important;width:100%!important;position:fixed;left:0;top:0;right:0;bottom:0}:-moz-full-screen .tp-video-main{height:100%!important;width:100%!important;position:fixed;left:0;top:0;right:0;bottom:0}:-ms-fullscreen .tp-video-main{height:100%!important;width:100%!important;position:fixed;left:0;top:0;right:0;bottom:0}:-full-screen .tp-video-main,:fullscreen .tp-video-main{height:100%!important;width:100%!important;position:fixed;left:0;top:0;right:0;bottom:0}.tp-con{position:absolute;top:-90px;display:none;width:150px;margin:0 auto;padding:6px;background-color:hsla(0,0%,100%,.75);border-radius:6px;overflow:hidden}.tp-color{display:inline-block;position:absolute;top:18px;right:15px;border-radius:4px;cursor:pointer;z-index:7}.tp-color-w{float:left}.tp-color-warp{height:60px;overflow-y:scroll;overflow-x:hidden}.tp-color-main{width:20px;height:20px;border:1px solid #fff;border-radius:2px}.tp-color-bo{position:relative;bottom:8px;width:20px;height:20px;border-radius:50%;border:1px solid #8b8585}.tp-place{text-align:center;padding-bottom:4px}.tp-rightmenu{display:none;position:absolute;overflow:hidden;width:130px;margin:0;padding:0;list-style:none;border-radius:4px;background:rgba(28,28,28,.9);border:none;text-shadow:rgba(0,0,0,.5) 0 0 2px;color:#fff;z-index:9999}.tp-rightmenu a{color:#fff;text-decoration:none}.tp-rightmenu li{padding:2px 0 2px 8px;cursor:pointer}.tp-rightmenu li:hover{padding-left:7px;background-color:hsla(0,0%,100%,.2)}.tp-search-user{display:none}ul.tp-speend{display:none;margin:4px 0 4px 30px}.tp-copy-input{display:block;width:100%;height:19px;padding:0;margin:0;background-color:transparent;border:0;color:#fff;resize:none;cursor:pointer;font-size:15px;line-height:21px;overflow:hidden;font-family:Avenir Next,Helvetica,Arial,Lantinghei SC,Microsoft YaHei,sans-serif}.tp-control-alltime-phone{display:none}.tp-loding{position:absolute;width:100%;height:100%;top:0;left:0;z-index:20}.tp-loding-img-warp{height:120px;width:120px;box-sizing:content-box;border:8px solid hsla(0,0%,78%,.63);border-radius:50%;animation:lodingborder 1s infinite alternate;-webkit-animation:lodingborder 1s infinite alternate;overflow:hidden}@keyframes lodingborder{to{border:14px solid hsla(0,0%,78%,.63)}}@-webkit-keyframes lodingborder{to{border:14px solid hsla(0,0%,78%,.63)}}.tp-loding-img{background-image:url(http://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac3/02.gif);width:120px;height:120px;background-repeat:no-repeat;background-position:50%;background-size:100px;background-color:#fff}.tp-loding-text{color:#fff;text-align:center;position:absolute;bottom:30%;width:100%}.tp-img-back{position:absolute;width:100%;height:100%;background-size:cover;-webkit-filter:blur(10px);-moz-filter:blur(10px);-ms-filter:blur(10px);filter:blur(10px);z-index:2;overflow:hidden}.noflash-alert{display:none}section.clearfix.wp.area.player{z-index:99}.off-light{position:fixed;top:0;left:0;z-index:50;background-color:#000;width:100%;height:100%}@media screen and (max-width:700px){.tp-tranger{position:absolute;width:97%;bottom:4px;margin:0}.tp-video-con>.tp-send{bottom:60px;left:auto;right:10%;width:80%}.tp-control-alltime{display:none}.tp-control-alltime-phone{display:inline-block}}.tp-zoomoutdown{animation:zoomOutDown .5s;-webkit-animation:zoomOutDown .5s}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.tp-zoomoutup{animation:zoomInUp .5s;-webkit-animation:zoomInUp .5s}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@media screen and (max-width:470px){.tp-syk{display:none}}",""])},function(e,t){function i(e,t){var i=e[1]||"",o=e[3];if(!o)return i;if(t&&"function"==typeof btoa){var a=n(o);return[i].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([a]).join("\n")}return[i].join("\n")}function n(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=i(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var n={},o=0;o=0&&w.splice(t,1)}function r(e){var t=document.createElement("style");return e.attrs.type="text/css",d(t,e.attrs),a(e,t),t}function l(e){var t=document.createElement("link");return e.attrs.type="text/css",e.attrs.rel="stylesheet",d(t,e.attrs),a(e,t),t}function d(e,t){Object.keys(t).forEach(function(i){e.setAttribute(i,t[i])})}function p(e,t){var i,n,o,a;if(t.transform&&e.css){if(!(a=t.transform(e.css)))return function(){};e.css=a}if(t.singleton){var d=y++;i=g||(g=r(t)),n=c.bind(null,i,d,!1),o=c.bind(null,i,d,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(i=l(t),n=u.bind(null,i,t),o=function(){s(i),i.href&&URL.revokeObjectURL(i.href)}):(i=r(t),n=h.bind(null,i),o=function(){s(i)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else o()}}function c(e,t,i,n){var o=i?"":n.css;if(e.styleSheet)e.styleSheet.cssText=x(t,o);else{var a=document.createTextNode(o),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(a,s[t]):e.appendChild(a)}}function h(e,t){var i=t.css,n=t.media;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}function u(e,t,i){var n=i.css,o=i.sourceMap,a=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||a)&&(n=k(n)),o&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([n],{type:"text/css"}),r=e.href;e.href=URL.createObjectURL(s),r&&URL.revokeObjectURL(r)}var f={},m=function(e){var t;return function(){return void 0===t&&(t=e.apply(this,arguments)),t}}(function(){return window&&document&&document.all&&!window.atob}),v=function(e){var t={};return function(i){if(void 0===t[i]){var n=e.call(this,i);if(n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[i]=n}return t[i]}}(function(e){return document.querySelector(e)}),g=null,y=0,w=[],k=i(11);e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},t.attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||(t.singleton=m()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var i=o(e,t);return n(i,t),function(e){for(var a=[],s=0;s 2 | 3 | 4 | 5 | TPlayer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 64 | 65 | 66 | 69 |

70 |

71 | sm29146509 あずにゃん：想做一下这样的琪露诺~ 72 |

73 | 74 | 91 |

92 |

93 | FLV.JS Test 如此饥渴，如此邪恶……禽兽放开那些羊！它们是我的！！ 94 |

95 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /logo-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haocity/Tplayer/638ae50a7c4467c4fbbe668d0d18776ce7a0e3f4/logo-small.png -------------------------------------------------------------------------------- /node/index.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | var url = require('url'); 3 | var util = require('util'); 4 | var querystring = require('querystring'); 5 | mysql = require('mysql'); 6 | let dbconfig = { 7 | host: 'localhost', 8 | user: 'user', 9 | password: '****', 10 | database: 'danmaku' 11 | }; 12 | console.log('弹幕服务开启'); 13 | http.createServer(function(req, res) { 14 | res.writeHead(200, { 15 | 'Content-Type': 'application/json; charset=utf8', 16 | 'Access-Control-Allow-Origin': '*' 17 | }); 18 | var getobj = querystring.parse(url.parse(req.url).query); 19 | if(getobj.id) { 20 | db = mysql.createConnection(dbconfig); 21 | console.log('查询id: ' + getobj.id + '的弹幕'); 22 | db.query('SELECT * FROM `' + parseInt(getobj.id) + '`', function(err, rows, fields) { 23 | if(err) { 24 | res.end('{"success":0,"data":[]}'); 25 | } 26 | res.end('{"success":1,"data":' + JSON.stringify(rows) + '}'); 27 | }); 28 | } else { 29 | res.end('{"success":0,"data":[{"id":0,"time":10,"text":"请求参数错误￣□￣｜｜","color":"#fff","place":1}]}'); 30 | } 31 | db.end(); 32 | console.log('关闭连接'); 33 | }).listen(5221); 34 | 35 | http.createServer(function(req, res) { 36 | var body = ""; 37 | req.on('data', function(chunk) { 38 | body += chunk; 39 | }); 40 | req.on('end', function() { 41 | // 解析参数 42 | var p = querystring.parse(body); 43 | // 设置响应头部信息及编码 44 | res.writeHead(200, { 45 | 'Content-Type': 'application/json; charset=utf8', 46 | 'Access-Control-Allow-Origin': '*' 47 | }); 48 | let time = new Date(); 49 | if(p.id && p.time && p.text && p.color && p.place) { // 输出提交的数据 50 | db = mysql.createConnection(dbconfig); 51 | db.query('CREATE TABLE IF NOT EXISTS `' + p.id + '` (`id` int(4) NOT NULL AUTO_INCREMENT, `time` int(6) NOT NULL,`text` varchar(200) NOT NULL,`color` varchar(20) NOT NULL,`place` int(1) NOT NULL,PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=utf8 COMMENT="Tplayer"'); 52 | var sql = "INSERT INTO `danmaku`.`" + parseInt(p.id) + "` (`id`, `time`, `text`, `color`, `place`) VALUES (NULL, " + db.escape(p.time) + ", " + db.escape(p.text) + ", " + db.escape(p.color) + ", " + db.escape(p.place) + ")"; 53 | console.log(sql); 54 | db.query(sql, function(err, rows, fields) { 55 | res.end(`{"success":1,"container":"发送成功","time":"${time}"}`); 56 | console.log(`发送弹幕完成表:${p.id}内容:${p.text}`) 57 | db.end(); 58 | }) 59 | } else { 60 | res.end(`{"success":0,"container":"请求参数错误","time":"${time}"}`); 61 | } 62 | }) 63 | }).listen(5220); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tplayer-master", 3 | "version": "1.0.0", 4 | "description": "![image](https://ooo.0o0.ooo/2016/12/16/585359df46d72.png)", 5 | "main": "tplayer.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "haocity", 10 | "license": "ISC", 11 | "dependencies": { 12 | "babel-loader": "^7.1.2", 13 | "url-loader": "^0.6.2" 14 | }, 15 | "devDependencies": { 16 | "babel-preset-es2015": "^6.24.1", 17 | "css-loader": "^0.28.7", 18 | "style-loader": "^0.19.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/html.js: -------------------------------------------------------------------------------- 1 | const html = { 2 | main: () => `

3 |

4 |

6 | 复制弹幕 7 |
播放速度 10 |
- 0.5
- 0.75
- 正常
- 1.25
- 1.5
- 2
17 |
清晰度
视频比例默认
截图

26 |

27 | 30 |

31 |

32 |

33 |

34 | 36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

确定

47 |

48 |

49 |

设置

50 | × 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 82 | 83 | 84 | 88 | 89 |

弹幕透明度
弹幕缩放
弹幕加粗	关闭阴影
合并重复弹幕
屏蔽弹幕
优先画质	75 \| 81 \|
85 \| 意见反馈&&协助开发&&指导请联系QQ 1051667334 86 \| 技术水平有限感谢你的使用 87 \|

90 |

91 |

92 |

93 | 94 |

95 |

96 |

97 |

◀滚动弹幕

98 |

99 |

100 |

101 |

102 |

103 |

104 | 0:00

弹

105 |

106 |

107 |

108 | ♫ 109 |

110 |

111 |

112 |

113 | 118 |

119 |

120 | 122 | 124 | 0:00 125 | / 0:00

126 |

1:00

127 |

128 |

129 |

130 |

131 |

132 |

133 |

134 |

135 | 136 |

137 | `, 138 | test:()=>console.log("ok") 139 | } 140 | module.exports = html -------------------------------------------------------------------------------- /src/img/set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haocity/Tplayer/638ae50a7c4467c4fbbe668d0d18776ce7a0e3f4/src/img/set.png -------------------------------------------------------------------------------- /src/img/sound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haocity/Tplayer/638ae50a7c4467c4fbbe668d0d18776ce7a0e3f4/src/img/sound.png -------------------------------------------------------------------------------- /src/img/tdlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haocity/Tplayer/638ae50a7c4467c4fbbe668d0d18776ce7a0e3f4/src/img/tdlogo.png -------------------------------------------------------------------------------- /src/img/vloop1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haocity/Tplayer/638ae50a7c4467c4fbbe668d0d18776ce7a0e3f4/src/img/vloop1.png -------------------------------------------------------------------------------- /src/img/vloop2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haocity/Tplayer/638ae50a7c4467c4fbbe668d0d18776ce7a0e3f4/src/img/vloop2.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * this. 3 | * @author HaoDong 4 | * @license The Star And Thank Author License (SATA) 5 | */ 6 | import html from './html'; 7 | import './style.css'; 8 | html.test(); 9 | 10 | let hasClass=(elements, cName)=>{ 11 | return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)")); 12 | } 13 | 14 | let addClass=(elements, cName)=>{ 15 | if (!hasClass(elements, cName)) { 16 | elements.className += " " + cName; 17 | } 18 | } 19 | 20 | let removeClass=(elements, cName)=> { 21 | if (hasClass(elements, cName)) { 22 | elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " "); 23 | } 24 | } 25 | 26 | 27 | function xhr(url, method='GET', data=null) { 28 | return new Promise(function(res, rej) { 29 | try { 30 | let xhr = new XMLHttpRequest() 31 | xhr.onreadystatechange = function() { 32 | if (xhr.readyState == 4 && xhr.status == 200) { 33 | res(xhr.responseText) 34 | } else if(xhr.readyState == 4) { 35 | rej(xhr.status) 36 | } 37 | } 38 | xhr.open(method, url, true) 39 | xhr.send(data) 40 | } catch(e) {} 41 | }) 42 | } 43 | 44 | class Tplayer{ 45 | constructor(options){ 46 | 47 | let _this=this; 48 | this.options=options; 49 | this.warp=document.querySelector(this.options.Element); 50 | this.geturl = this.options.danmakuapi + "get/?id=" + this.options.danmakuid; 51 | this.sendurl = this.options.danmakuapi + "send/"; 52 | this.adddanmaku(this.geturl); 53 | this.data=new Array; 54 | // this.data=this.options.danmaku 55 | // this.nowdata = JSON.parse(this.data).danmaku 56 | 57 | this.vloop=false 58 | this.nowduan = 0 59 | this.v = html.main() 60 | this.warp.innerHTML=this.v 61 | this.bar=false; 62 | 63 | 64 | this.ele={ 65 | "tplayer":_this.$c(".tplayer")[0], 66 | "tplayer_main":_this.$c(".tp-video-main")[0], 67 | "danmaku_switch":_this.$c(".tp-danmaku-switch")[0], 68 | "tp_text":_this.$c(".tp-text")[0], 69 | "tp_up":_this.$c(".tp-up")[0], 70 | "tp_color_bo":_this.$c(".tp-color-bo")[0], 71 | "video_control_play":_this.$c(".tp-control-play")[0], 72 | "tp_oneplay":_this.$c(".tp-oneplay")[0], 73 | "danmaku_warp":_this.$c(".danmaku-warp")[0], 74 | "video_con":_this.$c(".tp-video-con")[0], 75 | "video_control_paused":_this.$c(".tp-control-paused")[0], 76 | "tp_s_w":_this.$c(".tp-s-tranger")[0], 77 | "tp_s":_this.$c(".tp-s-tranger-a")[0], 78 | "alltime":_this.$c(".tp-control-alltime")[0], 79 | "tranger_a":_this.$c(".tp-tranger-a")[0], 80 | "tranger_c":_this.$c(".tp-tranger-c")[0], 81 | "nowtime":_this.$c(".tp-control-nowtime")[0], 82 | "tp_spinner":_this.$c(".tp-spinner")[0], 83 | "full":_this.$c(".video-full")[0], 84 | "tp_con":_this.$c(".tp-con")[0], 85 | "tp_color_warp":_this.$c(".tp-color-warp")[0], 86 | "tp_place":_this.$c(".tp-place")[0], 87 | "tp_send":_this.$c(".tp-send")[0], 88 | "tranger":_this.$c(".tp-tranger")[0], 89 | "tp_speend_con":_this.$c(".tp-speend-con")[0], 90 | "tp_speend":_this.$c(".tp-speend")[0], 91 | "tp_video_warp":_this.$c(".tp-video-warp")[0], 92 | "tp_rightmenu":_this.$c(".tp-rightmenu")[0], 93 | "end":_this.$c(".video-end")[0], 94 | "replay":_this.$c(".replay")[0], 95 | "copy":_this.$c(".tp-copy-warp")[0], 96 | "copytext":_this.$c(".tp-copy-input")[0], 97 | "alltime_phone":_this.$c(".tp-control-alltime-phone")[0], 98 | "vloop":_this.$c('.tp-vloop')[0], 99 | "setbox":_this.$c('.tp-video-set')[0], 100 | "setclose":_this.$c('.tp-closeset')[0], 101 | "setbtn":_this.$c('.tp-set')[0], 102 | "setr1":_this.$c(".tp-s-r1")[0], 103 | "setr2":_this.$c(".tp-s-r2")[0], 104 | "setr3":_this.$c(".tp-s-r3")[0], 105 | "setr4":_this.$c(".tp-s-r4")[0], 106 | "setr5":_this.$c(".tp-s-r5")[0], 107 | "setr6":_this.$c(".tp-s-r6")[0], 108 | "setr7":_this.$c(".tp-s-r7")[0], 109 | "setr8":_this.$c(".tp-s-r8")[0], 110 | "video_ratio":_this.$c(".tp-ratio")[0], 111 | "alert":_this.$c(".tp-alert")[0], 112 | "alert_container":_this.$c(".tp-alert-container")[0], 113 | "alert_ok":_this.$c(".tp-alert-ok")[0], 114 | "screenshot":_this.$c(".tp-screenshot")[0], 115 | "definition":_this.$c(".tp-definition")[0], 116 | "tip":_this.$c(".tp-tip")[0], 117 | "css":_this.$c(".tp-css")[0] 118 | } 119 | 120 | 121 | 122 | if (localStorage.getItem('tdconfig')&&localStorage.getItem('tdconfig')!="undefined") { 123 | this.config=JSON.parse(localStorage.getItem('tdconfig')) 124 | console.log('加载设置成功') 125 | }else{ 126 | this.config=new Object() 127 | } 128 | this.changerconfig() 129 | //判断地址类型 130 | if(typeof this.options.video.url[0]=='object'){ 131 | let src=this.options.video.url 132 | console.log('多清晰度视频'); 133 | let t=this.config.definition; 134 | let vv,ele; 135 | ele=document.createElement('ul') 136 | for(let i in src[0]){ 137 | if(src[0][i].v==t){ 138 | vv=src[0][i] 139 | } 140 | let li=document.createElement('li') 141 | li.v=src[0][i].v 142 | li.vsrc=src[0][i].m3u8 143 | li.addEventListener('click',function(){ 144 | console.log('正在为你切换清晰度切换'+this.v); 145 | this.alert({t:'正在为你切换清晰度..',time:3000,padding:'6px 10px',opacity:"0.9"}) 146 | _this.ele.definition.querySelector('span').innerHTML=_this.Definition(this.v) 147 | let time=_this.Element.currentTime 148 | let hls = new Hls(); 149 | hls.loadSource(this.vsrc); 150 | hls.attachMedia(_this.Element); 151 | hls.on(Hls.Events.MANIFEST_PARSED,function() { 152 | let i=true; 153 | _this.Element.addEventListener("canplay", function() 154 | { 155 | if(i){ 156 | i=false 157 | _this.tiao(time) 158 | } 159 | 160 | } 161 | ); 162 | _this.Element.style.display='block' 163 | }) 164 | },false); 165 | li.innerHTML=_this.Definition(li.v) 166 | ele.appendChild(li); 167 | } 168 | if(!vv){ 169 | if(src[0].v1){ 170 | vv=src[0].v1 171 | }else if(src[0].v2){ 172 | vv=src[0].v2 173 | }else if(src[0].v3){ 174 | vv=src[0].v3 175 | }else if(src[0].v4){ 176 | vv=src[0].v4 177 | } 178 | } 179 | this.videosrcarr=[vv.m3u8] 180 | //创建清晰度菜单 181 | this.ele.definition.querySelector('span').innerHTML=_this.Definition(vv.v) 182 | this.ele.definition.appendChild(ele); 183 | this.ele.definition.style.display='block'; 184 | this.ele.definition.ul=this.ele.definition.querySelector('ul') 185 | this.ele.definition.ul.style.display='none' 186 | this.ele.definition.addEventListener('click',function(){ 187 | if(_this.ele.definition.ul.style.display=='block'){ 188 | _this.ele.definition.ul.style.display='none' 189 | }else{ 190 | _this.ele.definition.ul.style.display='block' 191 | } 192 | }) 193 | }else if(typeof this.options.video.url=="string"){ 194 | this.videosrcarr = new Array(this.options.video.url); 195 | }else{ 196 | this.videosrcarr = this.options.video.url 197 | } 198 | 199 | if(this.options.video.type == "flv"){ 200 | let video = document.createElement("video"); 201 | let arr=new Array 202 | for (let i = 0; i < this.videosrcarr.length; i++) { 203 | arr.push({url:this.videosrcarr[i]}) 204 | } 205 | if (flvjs&&flvjs.isSupported()) { 206 | console.log('这是flv视频启动加载'); 207 | let flvPlayer = flvjs.createPlayer({ 208 | type: 'flv', 209 | segments: arr 210 | }); 211 | flvPlayer.attachMediaElement(video) 212 | flvPlayer.load() 213 | this.Element = video 214 | video.className = "tp-video" 215 | video.preload = "auto" 216 | video.setAttribute('webkit-playsinline','') 217 | video.setAttribute('playsinline','') 218 | this.ele.tplayer.appendChild(video) 219 | }else{ 220 | console.error("请预先加载flv.js") 221 | } 222 | }else{ 223 | for (let i = 0; i < this.videosrcarr.length; i++) { 224 | let video = document.createElement("video") 225 | video.setAttribute('webkit-playsinline','') 226 | video.setAttribute('playsinline','') 227 | video.className = "tp-video" 228 | if (this.options.video.type == "hls") { 229 | if (Hls&&Hls.isSupported()) { 230 | console.log('这是hls视频启动加载'); 231 | let hls = new Hls(); 232 | hls.loadSource(this.videosrcarr[i]); 233 | hls.attachMedia(video); 234 | hls.on(Hls.Events.MANIFEST_PARSED,function() { 235 | console.log('可以开始加载'); 236 | if(this.options.video.autoplay){ 237 | this.play(); 238 | } 239 | }); 240 | }else if(video.canPlayType('application/vnd.apple.mpegurl')) { 241 | video.src = this.videosrcarr[i] 242 | }else{ 243 | console.error("请预先加载hls.js") 244 | } 245 | }else { 246 | video.src = this.videosrcarr[i] 247 | } 248 | 249 | if (i != 0) { 250 | video.style.display = "none" 251 | video.preload = "meta" 252 | } else { 253 | video.preload = "auto" 254 | this.Element = video 255 | } 256 | 257 | this.ele.tplayer.appendChild(video) 258 | } 259 | } 260 | //封面 261 | if(this.options.video.pic){ 262 | this.Element.poster=this.options.video.pic 263 | } 264 | this.danmakuelement = this.ele.danmaku_warp 265 | this.sjc = 0 266 | this.dsq = 0 267 | this.leftarr = {t:[],v:[],leaving:[],width:[]} 268 | this.toparr = [] 269 | this.dmheight = 37 270 | this.dmplace = 1 271 | if (/android/i.test(navigator.userAgent) || /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { 272 | this.istouch=1 273 | this.ele.video_con.style.opacity='1' 274 | this.ele.video_con.style.display='none' 275 | }else{ 276 | this.istouch=3//1.触摸 2.鼠标 3.可能为鼠标设备 277 | } 278 | //弹幕行高 279 | this.width = this.ele.tplayer_main.offsetWidth 280 | this.height =this.ele.tplayer_main.offsetHeight 281 | 282 | this.init() 283 | } 284 | 285 | init() { 286 | let _this=this 287 | this.nowdm=[] 288 | this.Element.addEventListener("canplaythrough", function(){ 289 | console.log('加载完成可以进行播放') 290 | }); 291 | this.videoelearr = this.ele.tplayer.getElementsByTagName("video") 292 | this.videotimearr = [] 293 | for (let i = 0; i < this.videoelearr.length; i++) { 294 | this.getallvideotime(this.videoelearr[i], i) 295 | } 296 | 297 | 298 | //样式 299 | this.send = function(text, color, wz, me,user,size) { 300 | let dm = document.createElement("div") 301 | let videotime=this.getnowtime() 302 | let inttime = parseInt(videotime * 10) 303 | dm.user=user 304 | dm.style.color = color 305 | dm.style.fontSize=size+'px' 306 | if (me) { 307 | dm.style.border = "1px solid #fff" 308 | } 309 | if (wz == 1) { 310 | //left 弹幕 311 | dm.appendChild(document.createTextNode(text)) 312 | dm.className = "danmaku tp-left" 313 | //this.config.danmakusize 314 | dm.style.transform = "translateX(-" + this.width / this.config.danmakusize + "px)" 315 | this.ele.danmaku_warp.appendChild(dm) 316 | let twidth=dm.offsetWidth*this.config.danmakusize; 317 | let time = this.width / 100 318 | let v = ( twidth + this.width) / time 319 | let dmtop = this.getlefttop(v, twidth) 320 | let leavetime = twidth / v 321 | this.leftarr.leaving[dmtop] = true 322 | 323 | 324 | if((dmtop+1) * this.dmheight*this.config.danmakusize= 0; i--) { 478 | arr[i].parentNode.removeChild(arr[i]) 479 | } 480 | 481 | } 482 | } 483 | } 484 | 485 | } 486 | //post发弹幕 487 | this.ele.tp_up.addEventListener("click", function() { 488 | if(_this.ele.tp_text.value){ 489 | _this.send(_this.ele.tp_text.value, _this.ele.tp_color_bo.style.backgroundColor,_this.dmplace, 1); 490 | _this.ele.tp_text.readonly = "readonly"; 491 | _this.ele.tp_up.disabled = "true"; 492 | _this.ele.tp_up.style.background = "#777479"; 493 | setTimeout(function() { 494 | _this.ele.tp_text.value = ""; 495 | _this.ele.tp_up.disabled = ""; 496 | _this.ele.tp_up.style.background = "#8715EF"; 497 | }, 500); 498 | let postData = { 499 | id:_this.options.danmakuid, 500 | text:_this.ele.tp_text.value, 501 | color:_this.ele.tp_color_bo.style.backgroundColor, 502 | time:parseInt(_this.getnowtime()*10), 503 | place:_this.dmplace 504 | }; 505 | 506 | postData = function(obj) { 507 | // 转成post需要的字符串. 508 | let str = ""; 509 | for (let prop in obj) { 510 | str += prop + "=" + obj[prop] + "&"; 511 | } 512 | return str; 513 | }(postData); 514 | let xhr = new XMLHttpRequest(); 515 | xhr.open("POST", _this.options.danmakuapi+"send/", true); 516 | xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 517 | xhr.onreadystatechange = function() { 518 | let XMLHttpReq = xhr; 519 | if (XMLHttpReq.readyState == 4) { 520 | if (XMLHttpReq.status == 200) { 521 | let text = XMLHttpReq.responseText; 522 | console.log(text); 523 | } 524 | } 525 | }; 526 | xhr.send(postData); 527 | } 528 | }); 529 | //回车发射 530 | this.ele.tp_text.onkeydown = function(event) { 531 | let e = event || window.event || arguments.callee.caller.arguments[0]; 532 | if (e.keyCode == 13) { 533 | _this.ele.tp_up.click(); 534 | } else if (e.keyCode == 32) { 535 | e.stopPropagation(); 536 | } 537 | }; 538 | //弹幕开关 539 | this.ele.danmaku_switch.addEventListener("click", function() { 540 | if (this.className == "tp-danmaku-switch") { 541 | this.className = "tp-danmaku-switch tp-danmaku-switch-c"; 542 | _this.ele.danmaku_warp.style.opacity=0; 543 | } else { 544 | this.className = "tp-danmaku-switch"; 545 | _this.ele.danmaku_warp.style.opacity=null; 546 | } 547 | }); 548 | 549 | 550 | this.ele.setr5.onclick=function(){ 551 | if (this.checked) { 552 | if(_this.removaldata){ 553 | _this.nowdata=_this.removaldata 554 | }else{ 555 | _this.removaldanmaku() 556 | } 557 | _this.config.qc=true 558 | }else{ 559 | _this.nowdata=_this.data.slice(0) 560 | _this.config.qc=false 561 | } 562 | localStorage.setItem('tdconfig', JSON.stringify(_this.config)) 563 | } 564 | this.ele.setr6.onclick=function(){ 565 | if (this.checked) { 566 | _this.shielddanmaku() 567 | _this.config.pb=true 568 | }else{ 569 | _this.nowdata=_this.data.slice(0) 570 | _this.config.pb=false 571 | } 572 | _this.config.pbs=_this.ele.setr7.value 573 | localStorage.setItem('tdconfig', JSON.stringify(_this.config)) 574 | } 575 | this.ele.setr7.addEventListener('keydown',function(event){ 576 | let e = event || window.event || arguments.callee.caller.arguments[0]; 577 | if (e.keyCode) { 578 | e.stopPropagation(); 579 | } 580 | }); 581 | this.ele.setr7.onchange=function(){ 582 | if (_this.ele.setr6.checked) { 583 | _this.shielddanmaku() 584 | } 585 | } 586 | this.ele.setr8.onchange=function(){ 587 | const t=this.selectedIndex+1 588 | _this.config.definition=t 589 | } 590 | this.ele.setr7.value=_this.config.pbs 591 | 592 | 593 | 594 | this.ele.setr1.onchange=_this.changerset.bind(_this); 595 | this.ele.setr2.onchange=_this.changerset.bind(_this); 596 | this.ele.setclose.addEventListener('click',function(){ 597 | _this.changerset.bind(_this) 598 | _this.config.pbs=_this.ele.setr7.value 599 | localStorage.setItem('tdconfig', JSON.stringify(_this.config)) 600 | addClass(_this.ele.setbox,'tp-zoomoutdown'); 601 | setTimeout(function(){ 602 | _this.ele.setbox.style.display='none' 603 | removeClass(_this.ele.setbox,'tp-zoomoutdown') 604 | },480); 605 | },false); 606 | this.ele.setbtn.addEventListener('click',function(){ 607 | if (_this.ele.setbox.style.display!='block') { 608 | _this.ele.setbox.style.display='block' 609 | addClass(_this.ele.setbox,'tp-zoomoutup'); 610 | setTimeout(function(){ 611 | _this.ele.setbox.className='tp-video-set'; 612 | },480); 613 | }else if(_this.ele.setbox.className=='tp-video-set'){ 614 | _this.ele.setclose.click(); 615 | } 616 | },false); 617 | this.ele.setr3.onclick=function(){ 618 | if (this.checked) { 619 | _this.config.dmweight=600 620 | }else{ 621 | _this.config.dmweight=400 622 | } 623 | _this.changerconfig(); 624 | } 625 | this.ele.setr4.onclick=function(){ 626 | if (this.checked) { 627 | _this.config.dmshadow=0; 628 | }else{ 629 | _this.config.dmshadow=2 630 | } 631 | _this.changerconfig(); 632 | } 633 | 634 | 635 | //视频播放 636 | this.ele.video_control_play.addEventListener("click",function(){ 637 | _this.play(); 638 | }); 639 | 640 | this.ele.tp_oneplay.addEventListener("animationend", function(){ 641 | removeClass(this,'tp-zoomoutdown') 642 | this.style.display='none' 643 | }, false) 644 | this.ele.tp_oneplay.addEventListener("webkitAnimationEnd", function(){ 645 | removeClass(this,'tp-zoomoutdown') 646 | this.style.display='none' 647 | }, false) 648 | //视频暂停 649 | this.ele.video_control_paused.addEventListener("click", function() { 650 | _this.pause(); 651 | }); 652 | 653 | this.ele.tp_oneplay.addEventListener("click", function() { 654 | addClass(this,'tp-zoomoutdown') 655 | _this.play() 656 | }); 657 | //鼠标隐藏 658 | this.ele.danmaku_warp.addEventListener('mousemove',function(){ 659 | if(this.time){clearTimeout(this.time)} 660 | _this.ele.danmaku_warp.style.cursor='auto'; 661 | this.time=setTimeout(function(){ 662 | _this.ele.danmaku_warp.style.cursor='none'; 663 | },3000) 664 | }) 665 | 666 | //触摸 667 | this.ele.danmaku_warp.addEventListener("touchend",()=> { 668 | if(this.istouch!=1){ 669 | this.istouch==1 670 | } 671 | let e = this.ele.video_con; 672 | if(e.style.display == "block") { 673 | e.style.display = "none" 674 | if(this.Element.paused) { 675 | this.play(); 676 | } else { 677 | this.pause() 678 | } 679 | } else { 680 | e.style.display = "block"; 681 | if(!this.Element.paused) { 682 | this.pause() 683 | } 684 | } 685 | }); 686 | 687 | 688 | this.ele.alert_ok.addEventListener('click',function(){ 689 | _this.ele.alert.style.display='none' 690 | },false) 691 | this.ele.screenshot.addEventListener('click',function(){ 692 | _this.ele.tp_rightmenu.style.display='none' 693 | _this.screenshot() 694 | },false) 695 | 696 | this.sound = this.config.sound; 697 | if (this.sound) { 698 | this.ele.tp_s.style.width = this.sound+"%"; 699 | this.Element.volume = parseInt(this.ele.tp_s.style.width) * .01; 700 | } else { 701 | this.ele.tp_s.style.width = "80%"; 702 | this.changersound(); 703 | } 704 | //循环按钮 705 | this.ele.vloop.onclick=function(){ 706 | if (_this.vloop) { 707 | _this.vloop=false 708 | this.className='tp-vloop tp-vloop1' 709 | }else{ 710 | _this.vloop=true 711 | this.className='tp-vloop tp-vloop2' 712 | } 713 | } 714 | //音量调节 715 | this.ele.tp_s_w.addEventListener("click", function(event) { 716 | let e = event || window.event || arguments.callee.caller.arguments[0]; 717 | let xbl = _this.show_coords(e, this).xbl * 100; 718 | _this.ele.tp_s.style.width = xbl + "%"; 719 | _this.changersound(); 720 | }, false); 721 | 722 | //行走器 723 | this.Element.addEventListener('timeupdate',function(){ 724 | let videotime = _this.getnowtime(); 725 | let smalltime = _this.Element.currentTime; 726 | _this.ele.tranger_a.style.width = videotime / _this.alltime * 100 + "%"; 727 | let buff = _this.Element.buffered; 728 | //判断缓存段 729 | let oldduan = _this.nowduan - 1, oldtime = 0, time2 = 0; 730 | for (let i = 0; i <= oldduan; i++) { 731 | oldtime += _this.videotimearr[i]; 732 | } 733 | if(buff.length){ 734 | time2 = oldtime + buff.end(buff.length - 1); 735 | } 736 | let width = time2 / _this.alltime * 100 + "%"; 737 | if (_this.ele.tranger_c.style.width != width) { 738 | _this.ele.tranger_c.style.width = width; 739 | } 740 | },false) 741 | 742 | 743 | //定时器二 1s执行一次 744 | setInterval(()=>{ 745 | this.width = this.ele.tplayer_main.offsetWidth 746 | this.height =this.ele.tplayer_main.offsetHeight 747 | let videotime=this.getnowtime(videotime); 748 | //当前段播放将要结束缓存下一段 749 | let temp = _this.videoelearr[this.nowduan].currentTime; 750 | if (temp + 20 >= _this.videotimearr[this.nowduan]) { 751 | if (this.videoelearr[this.nowduan + 1]) { 752 | if (this.videoelearr[this.nowduan + 1].preload != "auto") { 753 | this.videoelearr[this.nowduan + 1].preload = "auto"; 754 | console.log("当前正在播放第" + this.nowduan + "段，正在加载下一段"); 755 | } 756 | } 757 | } 758 | this.ele.nowtime.innerHTML = this.getvideotime(videotime).m + ":" + this.getvideotime(videotime).s; 759 | 760 | }, 1e3); 761 | 762 | 763 | //进度条 764 | this.ele.tranger.addEventListener('mousemove',function(e){ 765 | if(!this.last){ 766 | this.last=e.x 767 | this.w=this.offsetWidth 768 | this.w2=_this.getLeft(this) 769 | this.t=_this.getTop(this) 770 | } 771 | 772 | if(this.last-e.x>4||this.last-e.x<-4){ 773 | 774 | _this.ele.tip.style.left=e.x-22+'px'; 775 | _this.ele.tip.style.top=this.t-27-document.documentElement.scrollTop+'px'; 776 | 777 | var xbl =(e.x-this.w2)/this.w; 778 | var videotime = _this.alltime*xbl; 779 | var a=_this.getvideotime(videotime); 780 | _this.ele.tip.innerHTML=a.m + ":" + a.s; 781 | } 782 | }) 783 | 784 | this.ele.tranger.addEventListener('mouseleave',function(){ 785 | _this.ele.tip.style.display='none' 786 | }) 787 | this.ele.tranger.addEventListener('mouseenter',function(){ 788 | _this.ele.tip.style.display='block' 789 | }) 790 | 791 | 792 | this.ele.tranger.onmousedown = function(event) { 793 | let e = event || window.event || arguments.callee.caller.arguments[0]; 794 | let xbl = _this.show_coords(e, this); 795 | _this.ele.tranger_a.style.width = xbl.xbl * 100 + "%"; 796 | _this.tiao(xbl.xbl * _this.alltime); 797 | }; 798 | 799 | for (let i = 0; i < this.videoelearr.length; i++) { 800 | this.videoelearr[i].addEventListener("waiting", function() { 801 | _this.videohc(); 802 | }); 803 | this.videoelearr[i].addEventListener("playing", function() { 804 | _this.tdplay(); 805 | }); 806 | } 807 | 808 | //键盘 809 | this.ele.tp_video_warp.addEventListener('click',function(){ 810 | setTimeout(function(){ _this.ele.tp_video_warp.xz=true;},200); 811 | }, false); 812 | document.addEventListener('click', function(e){ 813 | if (e.target==_this.ele.danmaku_warp) { 814 | _this.ele.tp_video_warp.xz=true 815 | }else{ 816 | _this.ele.tp_video_warp.xz=false 817 | } 818 | }, false); 819 | document.addEventListener("keydown", function(event) { 820 | let ev = event || window.event || arguments.callee.caller.arguments[0]; 821 | 822 | if(_this.ele.tp_video_warp.xz==true&&ev.target.nodeName!='INPUT'){ 823 | _this.showbar(); 824 | if(ev.keyCode==39||37){ 825 | if(_this.ele.end.style.display=="block"){ 826 | _this.ele.end.style.display="none" 827 | } 828 | } 829 | if (ev && ev.keyCode == 39) { 830 | // right 键 831 | let videotime = _this.getnowtime(); 832 | _this.tiao(videotime + 5); 833 | } 834 | if (ev && ev.keyCode == 37) { 835 | // left 键 836 | let videotime = _this.getnowtime(); 837 | _this.tiao(videotime - 5); 838 | } 839 | if (ev && ev.keyCode == 32) { 840 | // space 键 841 | event.preventDefault(); 842 | if(_this.ele.end.style.display=="block"){ 843 | _this.ele.end.style.display="none" 844 | _this.tiao(0) 845 | }else if (_this.Element.paused) { 846 | _this.play(); 847 | } else { 848 | _this.pause() 849 | } 850 | } 851 | if (ev && ev.keyCode == 38) { 852 | // up 键 853 | event.preventDefault(); 854 | _this.ele.tp_s.style.width = parseInt(_this.ele.tp_s.style.width) + 1 + "%"; 855 | _this.changersound(); 856 | } 857 | if (ev && ev.keyCode == 40) { 858 | // down 键 859 | event.preventDefault(); 860 | _this.ele.tp_s.style.width = parseInt(_this.ele.tp_s.style.width) - 1 + "%"; 861 | _this.changersound(); 862 | } 863 | } 864 | }); 865 | 866 | this.ele.full.addEventListener("click", ()=>{ 867 | //全屏切换 868 | let e = this.ele.tplayer_main 869 | if(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement){ 870 | if(document.cancelFullScreen) { 871 | document.cancelFullScreen() 872 | } else if(document.mozCancelFullScreen) { 873 | document.mozCancelFullScreen() 874 | } else if(document.webkitCancelFullScreen) { 875 | document.webkitCancelFullScreen() 876 | } 877 | //退出全屏 878 | } else { 879 | this.isfull=true; 880 | if(e.requestFullscreen) { 881 | e.requestFullscreen() 882 | } else if(e.mozRequestFullScreen) { 883 | e.mozRequestFullScreen() 884 | } else if(e.webkitRequestFullscreen) { 885 | e.webkitRequestFullscreen() 886 | } 887 | //进入全屏 888 | } 889 | //document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ? document.cancelFullScreen ? document.cancelFullScreen() :document.mozCancelFullScreen ? document.mozCancelFullScreen() :document.webkitCancelFullScreen && document.webkitCancelFullScreen() :e.requestFullscreen ? e.requestFullscreen() :e.mozRequestFullScreen ? e.mozRequestFullScreen() :e.webkitRequestFullscreen && e.webkitRequestFullscreen(); 890 | 891 | }); 892 | let screenChange = 'webkitfullscreenchange' || 'mozfullscreenchange' || 'fullscreenchange' 893 | this.ele.tplayer_main.addEventListener(screenChange,()=>{this.joinfull()},false); 894 | 895 | //颜色 896 | let tpcolor = new Object(); 897 | tpcolor.arr = new Array("#FFFFFF", "#000000", "#4ab0c6", "#555656", "#09b745", "#f86141", "#FFEB3B", "#4d38d8", "#fe67c1", "#ff9c07"); 898 | for (let r = 255; r >= 0; r -= 25) { 899 | for (let g = 0; g <= 255; g += 25) { 900 | for (let b = 0; b <= 255; b += 25) { 901 | tpcolor.arr.push("rgb(" + r + "," + g + "," + b + ")"); 902 | } 903 | } 904 | } 905 | let danmakucon = this.ele.tp_con; 906 | let colorwarp = this.ele.tp_color_warp; 907 | this.ele.tp_color_bo.addEventListener("click", function() { 908 | if (danmakucon.style.display == "block") { 909 | danmakucon.style.display = "none"; 910 | } else { 911 | danmakucon.style.display = "block"; 912 | } 913 | }); 914 | for (tpcolor.i = 0; tpcolor.i < tpcolor.arr.length; tpcolor.i++) { 915 | let colormain = document.createElement("div"); 916 | colormain.className = "tp-color-w"; 917 | let color = document.createElement("div"); 918 | color.className = "tp-color-main"; 919 | color.style.backgroundColor = tpcolor.arr[tpcolor.i]; 920 | 921 | colormain.appendChild(color); 922 | colorwarp.appendChild(colormain); 923 | } 924 | this.ele.tp_color_warp.addEventListener('click',function(event){ 925 | if(event.target.className=="tp-color-main"){ 926 | console.log(event.target.style.backgroundColor) 927 | _this.ele.tp_color_bo.style.backgroundColor = event.target.style.backgroundColor; 928 | _this.ele.tp_con.style.display='none' 929 | } 930 | }) 931 | //设置 932 | //视频速度设置 933 | this.ele.tp_speend_con.addEventListener("click", function() { 934 | let t = _this.ele.tp_speend; 935 | if (t.style.display == "block") { 936 | t.style.display = "none"; 937 | } else { 938 | t.style.display = "block"; 939 | } 940 | }); 941 | let videospeendele = this.ele.tp_speend.childNodes; 942 | for (let i = 0; i < videospeendele.length; i++) { 943 | let e = videospeendele[i]; 944 | let s = parseFloat(videospeendele[i].innerText).toFixed(2); 945 | if (s != "NaN") { 946 | e.onclick = function() { 947 | let t = parseFloat(this.innerText).toFixed(2); 948 | for (let i=0;i<_this.videoelearr.length;i++) { 949 | _this.videoelearr[i].playbackRate = t; 950 | } 951 | }; 952 | } else { 953 | e.onclick = function() { 954 | for (let i=0;i<_this.videoelearr.length;i++) { 955 | _this.videoelearr[i].playbackRate = 1; 956 | } 957 | }; 958 | } 959 | } 960 | //视频比例设置 961 | this.ele.video_ratio.ratio=1; 962 | this.ele.video_ratio.addEventListener('click',function(){ 963 | let vh=_this.Element.videoHeight 964 | let vw=_this.Element.videoWidth 965 | if(this.ratio==1){ 966 | this.ratio=2; 967 | let vb= vw*0.75/vh 968 | if(vb>1){ 969 | _this.ele.tplayer.style.transform=`scale(${1/vb},1)` 970 | _this.ele.tplayer.style.webkitTransform=`scale(${1/vb},1)` 971 | }else{ 972 | _this.ele.tplayer.style.transform=`scale(1,${vb})` 973 | _this.ele.tplayer.style.webkitTransform=`scale(1,${vb})` 974 | } 975 | 976 | 977 | this.innerText=`视频比例 4:3` 978 | }else if(this.ratio==2){ 979 | this.ratio=3 980 | 981 | let vb= vw*0.5625/vh 982 | 983 | if(vb>1){ 984 | _this.ele.tplayer.style.transform=`scale(${1/vb},1)` 985 | _this.ele.tplayer.style.webkitTransform=`scale(${1/vb},1)` 986 | }else{ 987 | _this.ele.tplayer.style.transform=`scale(1,${vb})` 988 | _this.ele.tplayer.style.webkitTransform=`scale(1,${vb})` 989 | } 990 | 991 | this.innerText=`视频比例 16:9` 992 | }else if(this.ratio==3){ 993 | this.ratio=4 994 | this.innerText=`视频比例全屏` 995 | _this.ele.tplayer.style.transform=`none` 996 | _this.ele.tplayer.style.webkitTransform=`none` 997 | for (let i = 0; i < _this.videoelearr.length; i++) { 998 | _this.videoelearr[i].style.height='auto'; 999 | _this.videoelearr[i].style.width='auto'; 1000 | _this.videoelearr[i].className=""; 1001 | } 1002 | setTimeout(function(){ 1003 | let w1= _this.ele.tplayer.offsetWidth 1004 | let w2= _this.videoelearr[0].offsetWidth 1005 | let h1= _this.ele.tplayer.offsetHeight 1006 | let h2= _this.videoelearr[0].offsetHeight 1007 | _this.ele.tplayer.style.transform=`scale(${w1/w2},${h1/h2})` 1008 | _this.ele.tplayer.style.webkitTransform=`scale(${w1/w2},${h1/h2})` 1009 | _this.ele.tplayer.style.transformOrigin= 'left top' 1010 | _this.ele.tplayer.style.webkitTransformOrigin='left top' 1011 | },0); 1012 | }else{ 1013 | for (let i = 0; i < _this.videoelearr.length; i++) { 1014 | _this.videoelearr[i].style.height='100%'; 1015 | _this.videoelearr[i].style.width='100%'; 1016 | _this.videoelearr[i].className=".tp-video"; 1017 | _this.ele.tplayer.style.webkitTransformOrigin='center' 1018 | } 1019 | this.ratio=1 1020 | this.innerText=`视频比例默认` 1021 | _this.ele.tplayer.style.transform=`none` 1022 | _this.ele.tplayer.style.webkitTransform=`none` 1023 | } 1024 | 1025 | 1026 | }) 1027 | 1028 | this.ele.danmaku_warp.onmousedown=function(event){ 1029 | let ev = event || window.event || arguments.callee.caller.arguments[0]; 1030 | if (ev.button == 0) { 1031 | if(_this.istouch!=1){ 1032 | //如果左按键 1033 | if (_this.ele.tp_rightmenu.style.display == "block") { 1034 | _this.ele.tp_rightmenu.style.display = "none"; 1035 | } else { 1036 | //视频暂停 1037 | if (_this.Element.paused) { 1038 | _this.play(); 1039 | } else { 1040 | _this.pause() 1041 | } 1042 | } 1043 | _this.showbar(); 1044 | } 1045 | } 1046 | } 1047 | 1048 | 1049 | this.ele.danmaku_warp.oncontextmenu = function(event){ 1050 | console.log('右键菜单') 1051 | let ev = event || window.event || arguments.callee.caller.arguments[0]; 1052 | _this.tp_menu(ev) 1053 | return false 1054 | } 1055 | 1056 | 1057 | this.ele.tp_place.addEventListener("click", function() { 1058 | if (_this.dmplace == 1) { 1059 | _this.dmplace = 2; 1060 | this.innerText = "▲顶部弹幕"; 1061 | } else { 1062 | _this.dmplace = 1; 1063 | this.innerText = "◀滚动弹幕"; 1064 | } 1065 | }); 1066 | 1067 | 1068 | 1069 | 1070 | this.dmspeend(this.width / 100); 1071 | //页面滚动显示 1072 | //this.options.srollfixe=screen.height 1073 | if(this.options.srollfixe&&this.options.srollfixe>0){ 1074 | document.addEventListener('scroll',()=> { 1075 | if((document.documentElement.scrollTop||document.body.scrollTop) >= this.options.srollfixe) { 1076 | this.ele.tp_video_warp.className='tp-video-warp tp-video-warp-fixed' 1077 | }else{ 1078 | this.ele.tp_video_warp.className='tp-video-warp' 1079 | } 1080 | }) 1081 | } 1082 | } 1083 | //函數 1084 | $c(e){ 1085 | return this.warp.querySelectorAll(e); 1086 | } 1087 | getthis(){ 1088 | return this 1089 | } 1090 | //播放 1091 | play(){ 1092 | addClass(this.ele.tp_oneplay,'tp-zoomoutdown'); 1093 | if (this.dsq == 0) { 1094 | this.Interval = setInterval(function(){ 1095 | this.danmakutime(); 1096 | }.bind(this), 100); 1097 | this.dsq = 1; 1098 | } 1099 | if(this.istouch!=1){ 1100 | this.ele.video_con.style.opacity = "0"; 1101 | } 1102 | let e = this.ele.danmaku_warp.getElementsByTagName("div"); 1103 | this.ele.video_control_play.style.display = "none"; 1104 | this.ele.video_control_paused.style.display = "inline-block"; 1105 | this.Element.play(); 1106 | for (let i = e.length - 1; i >= 0; i--) { 1107 | removeClass(e[i], "tp-suspend"); 1108 | } 1109 | } 1110 | //暂停 1111 | pause(){ 1112 | clearInterval(this.Interval); 1113 | this.dsq = 0; 1114 | let e = this.ele.danmaku_warp.getElementsByTagName("div"); 1115 | this.ele.video_control_paused.style.display = "none" 1116 | this.ele.video_control_play.style.display = "inline-block" 1117 | this.Element.pause(); 1118 | for (let i = e.length - 1; i >= 0; i--) { 1119 | addClass(e[i], "tp-suspend") 1120 | } 1121 | this.ele.tp_spinner.style.display = "none"; 1122 | } 1123 | addacfundanmu(vid){ 1124 | let _this = this; 1125 | fetch("http://danmu.aixifan.com/size/" + vid).then(response => response.json()).then(function(json) { 1126 | let max=Math.ceil(json[2]/2000); 1127 | let nowid=0; 1128 | let nowp=0; 1129 | for (let i = 1; i <= max; i++) { 1130 | fetch("http://danmu.aixifan.com/V3/" + vid+'/'+i+'/2000').then(response => response.json()).then(function(json) { 1131 | for (let x = 0; x < json.length; x++) { 1132 | for (let y = 0; y < json[x].length; y++) { 1133 | if(json[x][y]){ 1134 | let o=new Object 1135 | o.text=json[x][y].m 1136 | let c=json[x][y].c.split(',') 1137 | o.time=parseInt(c[0]*10) 1138 | o.color='#'+(Array(6).join(0) + parseInt(c[1]).toString(16)).slice(-6) 1139 | o.place=c[2] 1140 | o.size=c[3] 1141 | o.user=c[4] 1142 | if (o.place!=1&&o.place!=7) {o.place=2} 1143 | o.id=nowid 1144 | nowid++ 1145 | _this.data.push(o) 1146 | _this.nowdata = _this.data.slice(0); 1147 | } 1148 | } 1149 | } 1150 | nowp++ 1151 | console.log('弹幕'+i+'段解析成功') 1152 | if(nowp==max){ 1153 | console.log('弹幕添加完成') 1154 | _this.setint(); 1155 | } 1156 | }) 1157 | } 1158 | }) 1159 | } 1160 | addonedanmaku(url) { 1161 | let _this = this; 1162 | fetch(url).then(response => response.json()).then(function(json) { 1163 | let nowid=0; 1164 | for(let x = 0; x < json.length; x++) { 1165 | for(let y = 0; y < json[x].length; y++) { 1166 | if(json[x][y]) { 1167 | let o = new Object 1168 | o.text = json[x][y].m 1169 | let c = json[x][y].c.split(',') 1170 | o.time = parseInt(c[0] * 10) 1171 | o.color = '#' + (Array(6).join(0) + parseInt(c[1]).toString(16)).slice(-6) 1172 | o.place = c[2] 1173 | o.size = c[3] 1174 | o.user = c[4] 1175 | if(o.place != 1 && o.place != 7) { 1176 | o.place = 2 1177 | } 1178 | o.id = nowid 1179 | nowid++ 1180 | _this.data.push(o) 1181 | _this.nowdata = _this.data.slice(0); 1182 | } 1183 | } 1184 | } 1185 | console.log('弹幕添加完成') 1186 | _this.setint(); 1187 | }) 1188 | } 1189 | adddanmaku(url) { 1190 | let _this=this; 1191 | let xmlhttp = new XMLHttpRequest(); 1192 | xmlhttp.onreadystatechange = function() { 1193 | if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 1194 | let t = JSON.parse(xmlhttp.responseText); 1195 | if (t.success == 1) { 1196 | if (t.data) { 1197 | for (let i = 0; i < t.data.length; i++) { 1198 | _this.data.push(t.data[i]); 1199 | } 1200 | } 1201 | if (t.danmu) { 1202 | for (let i = 0; i < t.danmu.length; i++) { 1203 | t.danmu[i].text = unescape(t.danmu[i].text); 1204 | _this.data.push(t.danmu[i]); 1205 | } 1206 | } 1207 | } 1208 | _this.nowdata = _this.data.slice(0); 1209 | _this.setint(); 1210 | } 1211 | }; 1212 | xmlhttp.open("GET", url, true); 1213 | xmlhttp.send(); 1214 | }; 1215 | 1216 | //弹幕速度 1217 | dmspeend(v) { 1218 | this.width = this.ele.tplayer_main.offsetWidth 1219 | this.height =this.ele.tplayer_main.offsetHeight 1220 | console.log('弹幕速度调整为'+v); 1221 | this.config.v=v; 1222 | this.changerconfig(); 1223 | } 1224 | joinfull(){ 1225 | let isfull = document.fullscreenElement || document.mozFullScreenElement ||document.webkitFullscreenElement 1226 | if(isfull) { 1227 | if(this.ele.tplayer_main==isfull){ 1228 | console.log('进入全屏', this.height) 1229 | this.ele.tranger.last=false 1230 | this.ele.video_ratio.ratio=4 1231 | this.ele.video_ratio.click() 1232 | this.width = this.ele.tplayer_main.offsetWidth 1233 | this.height =this.ele.tplayer_main.offsetHeight 1234 | let e = this.ele.danmaku_warp.getElementsByTagName("div") 1235 | for (let i = 0; i < e.length; i++) { 1236 | if (hasClass(e[i], "tp-left")) { 1237 | e[i].style.transform = "translateX(-" + this.width/this.config.danmakusize + "px)"; 1238 | } 1239 | } 1240 | this.dmspeend(this.width / 100) 1241 | 1242 | } 1243 | } else { 1244 | console.log('退出全屏') 1245 | this.ele.tranger.last=false 1246 | this.width = this.ele.tplayer.offsetWidth 1247 | this.dmspeend(this.width / 100) 1248 | let e = this.ele.danmaku_warp.getElementsByTagName("div") 1249 | for (let i = e.length - 1; i >= 0; i--) { 1250 | if (hasClass(e[i], "tp-left")) { 1251 | e[i].style.transform = "translateX(-" + this.width/this.config.danmakusize + "px)" 1252 | } 1253 | } 1254 | this.ele.video_ratio.ratio=4 1255 | this.ele.video_ratio.click() 1256 | } 1257 | 1258 | } 1259 | changerconfig(){ 1260 | //默认清晰度 1261 | this.config.definition=this.config.definition||1 1262 | this.config.v=this.config.v||this.width / 100 1263 | this.config.danmakusize=this.config.danmakusize||1 1264 | this.config.danmakuo=this.config.danmakuo||1 1265 | this.config.dmweight=this.config.dmweight||600 1266 | this.config.sound=this.config.sound||80 1267 | this.config.pbs=this.config.pbs||'笑容我来守护,隔壁难民' 1268 | 1!=this.config.qc&&(this.config.qc=!1); 1269 | 1!=this.config.pb&&(this.config.pb=!1); 1270 | 0!=this.config.dmshadow&&(this.config.dmshadow=3); 1271 | let shadow=''; 1272 | if(this.config.dmshadow){ 1273 | shadow=`text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;` 1274 | } 1275 | let t=this.options.Element 1276 | this.ele.css.innerHTML = `${t} .tp-left {animation: dmleft ${this.config.v}s linear;-webkit-animation: dmleft ${this.config.v}s linear;}${t} .danmaku-warp{font-weight:${this.config.dmweight};transform:scale(${this.config.danmakusize});-webkit-transform:scale(${this.config.danmakusize});-moz-transform:scale(${this.config.danmakusize});width:${100/this.config.danmakusize}%;height:${100/this.config.danmakusize}%;opacity:${this.config.danmakuo}}${t} .tp-video-main>.danmaku-warp>.danmaku{${shadow}}`; 1277 | let earr= this.$c('.tp-left'); 1278 | for (let i = 0; i < earr.length; i++) { 1279 | earr[i].style.transform = "translateX(-" + this.width/this.config.danmakusize + "px)"; 1280 | } 1281 | localStorage.setItem('tdconfig', JSON.stringify(this.config)) 1282 | } 1283 | //下一段提示 1284 | nextvideo(callback){ 1285 | console.log('视频存在下一段') 1286 | let e=document.createElement('div') 1287 | e.className='tp-msg' 1288 | 1289 | let text=document.createElement('span') 1290 | text.i=5; 1291 | text.innerHTML=text.i+'秒后将播放下一段' 1292 | 1293 | let btn=document.createElement('span') 1294 | btn.innerHTML='×' 1295 | btn.className='tp-msg-close' 1296 | btn.addEventListener('click',function(){ 1297 | btn.parentNode.parentNode.removeChild(btn.parentNode) 1298 | if(time){clearInterval(time)} 1299 | }) 1300 | e.appendChild(btn) 1301 | e.appendChild(text) 1302 | let _this=this; 1303 | this.ele.tplayer_main.appendChild(e) 1304 | let time=setInterval(function(){ 1305 | if(text.i>0){ 1306 | text.i-- 1307 | text.innerHTML=text.i+'秒后将播放下一段' 1308 | }else{ 1309 | clearInterval(time) 1310 | console.log('播放下一段') 1311 | let t=_this.warp.childNodes 1312 | for (let i = 0; i < t.length; i++) { 1313 | _this.warp.removeChild(t[i]) 1314 | } 1315 | if (typeof callback === "function"){ 1316 | callback() 1317 | }else{ 1318 | console.log('eero') 1319 | console.log(callback) 1320 | } 1321 | } 1322 | },1000) 1323 | } 1324 | getnowtime() { 1325 | let videotime = 0; 1326 | for (let i = 0; i <= this.nowduan - 1; i++) { 1327 | videotime += this.videotimearr[i]; 1328 | } 1329 | videotime += this.videoelearr[this.nowduan].currentTime; 1330 | return videotime; 1331 | } 1332 | getallvideotime(ele, i) { 1333 | let time = ele.duration 1334 | if (!time) { 1335 | setTimeout(function() { 1336 | this.getallvideotime(ele, i) 1337 | }.bind(this), 500) 1338 | } else { 1339 | this.videotimearr[i] = time 1340 | if (this.videotimearr[0] && this.videotimearr[this.videotimearr.length - 1]) { 1341 | this.alltime = 0 1342 | for (let i = 0; i < this.videotimearr.length; i++) { 1343 | this.alltime += this.videotimearr[i] 1344 | } 1345 | this.ele.alltime.innerHTML = this.getvideotime(this.alltime).m + ":" + this.getvideotime(this.alltime).s 1346 | this.ele.alltime_phone.innerHTML =' / '+this.ele.alltime.innerHTML 1347 | } 1348 | } 1349 | } 1350 | 1351 | 1352 | Definition(i){ 1353 | if(i==1){ 1354 | return '超清' 1355 | }else if(i==2){ 1356 | return '高清' 1357 | }else if(i==3){ 1358 | return '普通' 1359 | }else if(i==4){ 1360 | return '流畅' 1361 | } 1362 | } 1363 | getvideotime(time) { 1364 | let tm; 1365 | let m = parseInt(time / 60); 1366 | if (parseInt(time % 60) >= 10) { 1367 | tm = parseInt(time % 60); 1368 | } else { 1369 | tm = "0" + parseInt(time % 60); 1370 | } 1371 | return { 1372 | m:m, 1373 | s:tm 1374 | }; 1375 | } 1376 | //屏蔽关键词弹幕 1377 | shielddanmaku(){ 1378 | let shieldarr=this.ele.setr7.value.split(","); 1379 | let cache; 1380 | let b=0; 1381 | if (this.ele.setr5.checked) { 1382 | if (!this.removaldata) { 1383 | this.removaldanmaku() 1384 | } 1385 | let t=this.removaldata.slice(0) 1386 | cache=t 1387 | }else{ 1388 | let t=this.data.slice(0) 1389 | cache=t; 1390 | } 1391 | 1392 | for (let i = cache.length - 1; i >= 0; i--) { 1393 | if (cache[i]) { 1394 | if (cache[i].text) { 1395 | for (let x = shieldarr.length - 1; x >= 0; x--) { 1396 | if (cache[i]) { 1397 | if (cache[i].text.indexOf(shieldarr[x])>-1) { 1398 | delete cache[i] 1399 | b++ 1400 | } 1401 | } 1402 | } 1403 | } 1404 | } 1405 | } 1406 | this.nowdata=cache 1407 | let elearr=this.$c('.danmaku-warp>.danmaku') 1408 | for (let x = 0; x < elearr.length; x++) { 1409 | for (let y = 0; y < shieldarr.length; y++) { 1410 | if (elearr[x].innerText.indexOf(shieldarr[y])>-1) { 1411 | elearr[x].innerText=null; 1412 | } 1413 | } 1414 | } 1415 | console.log(shieldarr) 1416 | console.log(`弹幕屏蔽屏蔽${b}个弹幕`) 1417 | } 1418 | 1419 | danmakuhide(e, topid) { 1420 | if(e&&e.parentNode){ 1421 | e.parentNode.removeChild(e) 1422 | } 1423 | if(topid !== undefined) { 1424 | this.toparr[topid] = 0 1425 | } 1426 | } 1427 | 1428 | getlefttop(v,dmwidth) { 1429 | let h 1430 | let t=this.getnowtime() 1431 | let allt=this.width/100 1432 | for (let i = 0; i <= this.leftarr.t.length; i++) { 1433 | //leaving是否离开左侧屏幕完全显示出来 1434 | if (!this.leftarr.leaving[i]) { 1435 | if (this.leftarr.v[i]>=v) { 1436 | h = i; 1437 | break; 1438 | }else { 1439 | if (!this.leftarr.t[i]) {break} 1440 | //追上的时间和距离 1441 | let tt=this.width/100-t+this.leftarr.t[i]; 1442 | let sz= tt*(v-this.leftarr.v[i]); 1443 | //间隔距离这里-20是为了防止跟太紧 1444 | let so=(t-this.leftarr.t[i])*this.leftarr.v[i]-this.leftarr.width[i]-20; 1445 | //console.log(`${i}弹幕会在上一弹幕尾部飞行${tt}秒速度差${v-this.leftarr.v[i]} 会追上路程 ${sz} 判断时距离 ${so}`) 1446 | if (sz= 0; i--) { 1510 | for (let a = cache.length - 1; a >= 0; a--) { 1511 | if (a==i) {break} 1512 | if (cache[i]&&cache[a]) { 1513 | if (cache[i].text==cache[a].text) { 1514 | delete cache[a]; 1515 | b++ 1516 | } 1517 | } 1518 | } 1519 | } 1520 | } 1521 | this.removaldata=cache 1522 | this.nowdata=this.removaldata 1523 | console.log(`弹幕去重去除${b}个重复弹幕`) 1524 | } 1525 | } 1526 | changerset(){ 1527 | let e=this.ele; 1528 | this.config.danmakuo=parseInt(e.setr1.value)/100; 1529 | this.config.danmakusize=parseInt(e.setr2.value)/50; 1530 | this.changerconfig(); 1531 | } 1532 | showbar() { 1533 | if(this.bar){ 1534 | clearTimeout(this.bar) 1535 | } 1536 | if(this.ele.video_con.style.opacity!='1'){ 1537 | this.ele.video_con.style.opacity = "1"; 1538 | 1539 | } 1540 | let _this=this; 1541 | this.bar=setTimeout(function(){ 1542 | _this.ele.video_con.style.opacity = "0"; 1543 | },3000); 1544 | } 1545 | 1546 | //定时器 1547 | danmakutime() { 1548 | let videotime = this.getnowtime(); 1549 | if (this.nowdata) { 1550 | let inttime = parseInt(videotime * 10); 1551 | for (let i = 0; i < this.nowdata.length; i++) { 1552 | if (this.nowdata[i]) { 1553 | //console.log('nowtime:'+inttime); 1554 | if (this.nowdata[i].time == inttime) { 1555 | this.send(unescape(this.nowdata[i].text), this.nowdata[i].color, this.nowdata[i].place,false,this.nowdata[i].user,this.nowdata[i].size); 1556 | delete this.nowdata[i]; 1557 | } 1558 | } 1559 | } 1560 | //弹幕定时器 1561 | for (var i = 0; i < this.nowdm.length; i++) { 1562 | if (this.nowdm[i]&&this.nowdm[i].time&&this.nowdm[i].time <= inttime) { 1563 | this.nowdm[i].call() 1564 | delete this.nowdm[i]; 1565 | } 1566 | } 1567 | } 1568 | } 1569 | //返回当前播放段 1570 | getduan(time) { 1571 | let mun = 0; 1572 | for (let i = 0; i < this.videotimearr.length; i++) { 1573 | mun += this.videotimearr[i]; 1574 | if (mun >= time) { 1575 | return i; 1576 | break; 1577 | } 1578 | } 1579 | } 1580 | tdplay() { 1581 | if (this.ele.tp_spinner.style.display = "block") { 1582 | if (this.dsq == 0) { 1583 | this.Interval = setInterval(function(){this.danmakutime()}.bind(this), 100); 1584 | this.dsq = 1; 1585 | } 1586 | let e = this.ele.danmaku_warp.getElementsByTagName("div"); 1587 | this.ele.tp_spinner.style.display = "none"; 1588 | this.ele.alltime.innerHTML = this.getvideotime(this.alltime).m + ":" +this.getvideotime(this.alltime).s; 1589 | for (let i = e.length - 1; i >= 0; i--) { 1590 | removeClass(e[i], "tp-suspend"); 1591 | } 1592 | } 1593 | } 1594 | //获取元素的纵坐标（相对于窗口） 1595 | getTop(e) { 1596 | let offset = e.offsetTop; 1597 | if (e.offsetParent != null) offset += this.getTop(e.offsetParent); 1598 | return offset; 1599 | } 1600 | //获取元素的横坐标（相对于窗口） 1601 | getLeft(e) { 1602 | let offset = e.offsetLeft; 1603 | if (e.offsetParent != null) offset += this.getLeft(e.offsetParent); 1604 | return offset; 1605 | } 1606 | show_coords(event, elem) { 1607 | let x = event.clientX - this.getLeft(elem); 1608 | let y = event.clientY - this.getTop(elem); 1609 | let xbl = x / elem.offsetWidth; 1610 | let ybl =1- y / elem.offsetHeight; 1611 | return { 1612 | x:x, 1613 | y:y, 1614 | w:elem.offsetWidth, 1615 | h:elem.offsetHeight, 1616 | xbl:xbl, 1617 | ybl:ybl 1618 | }; 1619 | } 1620 | //视频缓冲事件 1621 | videohc() { 1622 | console.log("loding"); 1623 | clearInterval(this.Interval); 1624 | this.dsq = 0; 1625 | this.ele.tp_spinner.style.display = "block"; 1626 | let e = this.ele.danmaku_warp.getElementsByTagName("div"); 1627 | for (let i = e.length - 1; i >= 0; i--) { 1628 | addClass(e[i], "tp-suspend"); 1629 | } 1630 | } 1631 | alert(o) { 1632 | let ele=this.ele.alert 1633 | clearTimeout(ele.t) 1634 | ele.style.display='block' 1635 | o.w = o.w || 'auto' 1636 | o.h = o.h || 'auto' 1637 | o.time=o.time||1000 1638 | o.padding=o.padding||"20px" 1639 | o.opacity=o.opacity||1 1640 | if(o.btn){ 1641 | this.ele.alert_ok.style.display='block' 1642 | }else{ 1643 | this.ele.alert_ok.style.display='none' 1644 | ele.t=setTimeout(function(){ 1645 | ele.style.display='none' 1646 | },o.time) 1647 | } 1648 | if(typeof o.t == 'object') { 1649 | this.ele.alert_container.innerHTML = null 1650 | this.ele.alert_container.appendChild(o.t) 1651 | } else { 1652 | this.ele.alert_container.innerHTML = o.t 1653 | } 1654 | this.ele.alert_container.style.padding=o.padding 1655 | ele.style.opacity=o.opacity 1656 | this.ele.alert.style.display = 'block' 1657 | 1658 | } 1659 | screenshot() { 1660 | let c = document.createElement('canvas'); 1661 | c.width = this.ele.tplayer.offsetWidth 1662 | c.height = this.ele.tplayer.offsetHeight 1663 | c.getContext('2d').drawImage(this.videoelearr[this.nowduan], 0, 0, c.width, c.height); 1664 | c.className = 'tp-screenshot-canvas' 1665 | let warp = document.createElement("div"); 1666 | warp.innerHTML = '

请右键保存截图

' 1667 | warp.appendChild(c) 1668 | this.alert({t:warp,btn:true}) 1669 | } 1670 | changersound() { 1671 | let s = parseInt(this.ele.tp_s.style.width) * .01; 1672 | for(let i = 0; i < this.videoelearr.length; i++) { 1673 | this.videoelearr[i].volume = s; 1674 | } 1675 | this.config.sound =parseInt(s * 100); 1676 | this.alert({t:'

'+this.config.sound+"%",time:1000,padding:'6px 10px',opacity:"0.9"}) 1677 | localStorage.setItem('tdconfig', JSON.stringify(this.config)) 1678 | } 1679 | //菜单 1680 | tp_menu(ev) { 1681 | let _this=this; 1682 | let container = this.ele.tplayer; 1683 | let rightmenu = this.ele.tp_rightmenu; 1684 | if (this.istouch!=1){ 1685 | let target = ev.target || ev.srcElement; 1686 | if (hasClass(target, "danmaku")) { 1687 | this.ele.copytext.innerHTML = target.innerHTML; 1688 | this.ele.copy.style.display = "block"; 1689 | this.ele.copy.onclick = function() { 1690 | _this.ele.copytext.select(); 1691 | document.execCommand("Copy"); 1692 | rightmenu.style.display = "none"; 1693 | }; 1694 | } else { 1695 | this.ele.copy.style.display = "none"; 1696 | } 1697 | rightmenu.style.display = "block"; 1698 | let leftedge, topedge, danmakuheight = this.ele.danmaku_warp.offsetHeight, danmakuwidth = this.ele.danmaku_warp.offsetWidth; 1699 | if (danmakuheight == document.documentElement.clientHeight) { 1700 | topedge = ev.clientY; 1701 | leftedge = ev.clientX; 1702 | if (leftedge + rightmenu.offsetWidth > danmakuwidth) { 1703 | leftedge = danmakuwidth - rightmenu.offsetWidth; 1704 | } 1705 | if (topedge + rightmenu.offsetWidth > danmakuheight) { 1706 | topedge = danmakuheight - rightmenu.offsetHeight; 1707 | } 1708 | } else { 1709 | topedge = ev.clientY + document.documentElement.scrollTop - this.getTop(this.ele.tplayer); 1710 | leftedge = ev.clientX - this.getLeft(this.ele.tplayer); 1711 | let tweidth = container.offsetWidth; 1712 | let theigtht = container.offsetHeight; 1713 | if (leftedge + rightmenu.offsetWidth > tweidth) { 1714 | leftedge = tweidth - rightmenu.offsetWidth; 1715 | } 1716 | if (topedge + rightmenu.offsetHeight > theigtht) { 1717 | topedge = theigtht - rightmenu.offsetHeight; 1718 | } 1719 | } 1720 | rightmenu.style.top = topedge + "px"; 1721 | rightmenu.style.left = leftedge + "px"; 1722 | 1723 | } 1724 | } 1725 | changermode(a) { 1726 | //this.ele.tp_video_warp.style.height = this.ele.tp_video_warp.offsetWidth * 0.6 + 'px'; 1727 | } 1728 | tiao(time) { 1729 | let oldduan = this.getduan(time) - 1, oldtime = 0; 1730 | for (let i = 0; i <= oldduan; i++) { 1731 | oldtime += this.videotimearr[i]; 1732 | } 1733 | let duantime = time - oldtime; 1734 | this.nowduan = this.getduan(time); 1735 | //video id 1736 | for (let i = 0; i < this.videoelearr.length; i++) { 1737 | if (i != this.nowduan) { 1738 | let ele = this.videoelearr[i]; 1739 | ele.style.display = "none"; 1740 | ele.currentTime = 0; 1741 | ele.pause(); 1742 | } else { 1743 | let ele = this.videoelearr[i]; 1744 | this.Element = ele; 1745 | if (ele.style.display!= "block") { 1746 | ele.style.display = "block" 1747 | } 1748 | ele.currentTime = duantime; 1749 | if(ele.paused){ 1750 | ele.play() 1751 | } 1752 | this.ele.tp_spinner.style.display = "none"; 1753 | } 1754 | } 1755 | if(this.removaldata&&this.config.qc){ 1756 | this.nowdata=this.removaldata 1757 | if (this.config.pb) { 1758 | this.shielddanmaku() 1759 | } 1760 | }else{ 1761 | this.nowdata=this.data.slice(0); 1762 | } 1763 | if (this.ele.video_control_play.display != "none") { 1764 | this.play(); 1765 | } 1766 | //清空top和高级弹幕 1767 | // let a=this.ele.danmaku_warp.querySelectorAll('.danmaku-ad') 1768 | // for (let i = 0; i < a.length; i++) { 1769 | // a[i].parentNode.removeChild(a[i]) 1770 | // } 1771 | // let b=this.ele.danmaku_warp.querySelectorAll('.tp-top') 1772 | // for (let i = 0; i < b.length; i++) { 1773 | // b[i].parentNode.removeChild(b[i]) 1774 | // } 1775 | for (let i = 0; i < this.nowdm.length; i++) { 1776 | if(this.nowdm[i]&&this.nowdm[i].call){ 1777 | this.nowdm[i].call() 1778 | } 1779 | } 1780 | } 1781 | 1782 | 1783 | } 1784 | 1785 | window.Tplayer=Tplayer; 1786 | 1787 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | 2 | /*player*/ 3 | .tplayer{ 4 | height: 100%; 5 | width: 100%; 6 | } 7 | .tp-video-warp.tp-video-warp-fixed{ 8 | position: fixed; 9 | right: 10px; 10 | top: 10px; 11 | width: 360px; 12 | height: 230px; 13 | z-index: 99; 14 | } 15 | .tp-video-warp.tp-video-warp-fixed .tp-control{ 16 | display: none!important; 17 | } 18 | 19 | .tp-video-warp p{ 20 | margin: 0; 21 | } 22 | .tp-video-warp ul{ 23 | margin: 0; 24 | padding: 0; 25 | } 26 | .tp-video-warp{ 27 | font-size: 14px; 28 | } 29 | .tp-tip{ 30 | display: none; 31 | position: fixed; 32 | left: 145px; 33 | background-color: #5f5f5f7d; 34 | line-height: 18px; 35 | padding: 4px 6px; 36 | top: -9px; 37 | border-radius: 4px; 38 | /* transition: left 0.1s;*/ 39 | } 40 | .video-end { 41 | position: absolute; 42 | height: 100%; 43 | width: 100%; 44 | z-index: 8; 45 | background: #000 url(img/tdlogo.png) no-repeat right 40px bottom 30px; 46 | display: none; 47 | opacity: 1; 48 | animation: tpshow 3s; 49 | -webkit-animation:tpshow 3s; 50 | } 51 | @keyframes tpshow 52 | { 53 | from {opacity: 0} 54 | to {opacity: 1} 55 | } 56 | @-webkit-keyframes tpshow 57 | { 58 | from {opacity: 0} 59 | to {opacity: 1} 60 | } 61 | .video-end>.replay { 62 | position: absolute; 63 | left: 50%; 64 | top: 50%; 65 | margin-left: -50px; 66 | margin-top: -50px; 67 | transition:transform 2s; 68 | -moz-transition:transform 2s; 69 | -webkit-transition:transform 2s; 70 | } 71 | .video-end>.replay:hover { 72 | transform: rotate(360deg); 73 | -webkit-transform: rotate(360deg); 74 | -moz-transform: rotate(360deg); 75 | } 76 | .tp-video-main>.danmaku-warp>.danmaku { 77 | color: #fff; 78 | line-height: 37px; 79 | z-index: 6; 80 | padding: 0 4px; 81 | font-family: Avenir Next,Helvetica,Arial,Lantinghei SC,Microsoft YaHei,sans-serif; 82 | } 83 | .tp-left { 84 | position: absolute; 85 | will-change: transform; 86 | right: 0; 87 | font-size: 24px; 88 | animation: dmleft 10s linear; 89 | -webkit-animation: dmleft 10s linear; 90 | cursor: pointer; 91 | white-space: nowrap; 92 | } 93 | .tp-top { 94 | position: absolute; 95 | left: 50%; 96 | text-align: center; 97 | display: block; 98 | font-size: 22px; 99 | transform: translateX(-50%); 100 | -webkit-transform: translateX(-50%); 101 | white-space:nowrap; 102 | } 103 | .danmaku-ad{ 104 | position: absolute; 105 | white-space: nowrap; 106 | -webkit-transform: translate(50%,50%); 107 | -moz-transform: translate(50%,50%); 108 | transform: translate(50%,50%); 109 | } 110 | @keyframes dmleft { 111 | 0% { 112 | -webkit-transform: translateX(100%); 113 | transform: translateX(100%) 114 | } 115 | } 116 | @-webkit-keyframes dmleft { 117 | 0% { 118 | -webkit-transform: translateX(100%); 119 | transform: translateX(100%) 120 | } 121 | } 122 | .danmaku-warp { 123 | position: absolute; 124 | top: 0; 125 | left: 0; 126 | width: 100%; 127 | height: 100%; 128 | overflow: hidden; 129 | transform-origin: top left; 130 | -moz-transform-origin:top left; 131 | -webkit-transform-origin:top left; 132 | } 133 | .tp-send { 134 | position: absolute; 135 | left: 50%; 136 | width: 60%; 137 | height: 35px; 138 | border-radius: 5px; 139 | margin: 0 0 0 -30%; 140 | text-align: center; 141 | padding: 4px 0; 142 | background-color: rgba(255, 255, 255, 0.79); 143 | z-index: 6; 144 | box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); 145 | } 146 | .tp-text { 147 | width: 100%; 148 | line-height: 36px; 149 | height: 36px; 150 | border: none; 151 | text-align: center; 152 | background-color: transparent; 153 | outline: none; 154 | } 155 | 156 | .tp-up { 157 | display: none; 158 | position: relative; 159 | 160 | left: 20px; 161 | background-color: #8715EF; 162 | color: #fff; 163 | border: 0 solid #000; 164 | line-height: 20px; 165 | border-radius: 4px; 166 | padding: 3px 20px; 167 | } 168 | 169 | .tp-msg{ 170 | position: absolute; 171 | bottom: 60px; 172 | right: 6px; 173 | background-color: rgba(255, 255, 255, 0.95); 174 | padding: 6px 10px; 175 | z-index: 999; 176 | border-radius: 6px; 177 | } 178 | .tp-msg>.tp-msg-close{ 179 | cursor: pointer; 180 | color: #000; 181 | font-weight: 600; 182 | font-size: 1.4em; 183 | line-height: 18px; 184 | padding-right: 8px; 185 | font-size: 15px; 186 | } 187 | .tp-video-main { 188 | position: absolute; 189 | width: 100%; 190 | height: 100%; 191 | background-color: #000; 192 | -webkit-user-select: none; 193 | -moz-user-select: none; 194 | user-select: none; 195 | overflow:hidden; 196 | } 197 | .tp-video { 198 | position: absolute; 199 | left: 0; 200 | right: 0; 201 | bottom: 0; 202 | top: 0; 203 | width: 100%; 204 | height: 100%; 205 | margin: auto; 206 | } 207 | .tp-video-con { 208 | opacity: 0; 209 | position: absolute; 210 | bottom: 0; 211 | height: 100px; 212 | width: 100%; 213 | background: linear-gradient(to top,rgba(0,0,0,.75),hsla(0,0%,100%,0)); 214 | transition: opacity 1s; 215 | -moz-transition: opacity 1s; 216 | -webkit-transition: opacity 1s; 217 | } 218 | .tp-video-con:hover{ 219 | opacity: 1!important; 220 | } 221 | .tp-control { 222 | position: absolute; 223 | bottom: 0; 224 | padding-bottom: 10px; 225 | left: 0; 226 | width: 100%; 227 | height: 45px; 228 | color: #fff; 229 | line-height: 0; 230 | user-select: none; 231 | z-index: 888; 232 | } 233 | .tp-control-nowtime,.tp-control-alltime{ 234 | cursor: default; 235 | } 236 | .tp-icon { 237 | position: relative; 238 | top: 6px; 239 | padding-left: 10px; 240 | padding-right: 2px; 241 | width: 30px; 242 | height: 30px; 243 | cursor: pointer; 244 | fill: #fff; 245 | } 246 | 247 | .tp-definition{ 248 | display: none; 249 | } 250 | .tp-danmaku-switch { 251 | position: relative; 252 | display: inline-block; 253 | border: 2px solid #fff; 254 | color: #fff; 255 | border-radius: 50%; 256 | width: 22px; 257 | height: 22px; 258 | line-height: 22px; 259 | font-size: 14px; 260 | text-align: center; 261 | cursor: pointer; 262 | } 263 | .tp-danmaku-switch-c { 264 | color: #000 !important; 265 | border: none !important; 266 | background-color: #fff; 267 | } 268 | 269 | .tp-vloop{ 270 | display: inline-block; 271 | height: 25px; 272 | width: 25px; 273 | background-size: cover; 274 | transform: translateY(8px); 275 | cursor: pointer; 276 | } 277 | .tp-vloop1{ 278 | background-image: url(img/vloop1.png) 279 | } 280 | .tp-vloop2{ 281 | background-image: url(img/vloop2.png) 282 | } 283 | .tp-set{ 284 | background-image: url(img/set.png); 285 | display: inline-block; 286 | height: 24px; 287 | width: 24px; 288 | margin: 0 14px; 289 | background-size: cover; 290 | transform: translateY(8px); 291 | cursor: pointer; 292 | } 293 | .sound-ico{ 294 | background-image: url(img/sound.png); 295 | display: inline-block; 296 | height: 26px; 297 | width: 26px; 298 | background-size: cover; 299 | cursor: pointer; 300 | margin-right: 5px; 301 | vertical-align: bottom; 302 | } 303 | .tp-alert,.tp-video-set{ 304 | display: none; 305 | position: absolute; 306 | top: 50%; 307 | left: 50%; 308 | transform: translateX(-50%) translateY(-50%); 309 | -webkit-transform: translateX(-50%) translateY(-50%); 310 | z-index: 999; 311 | background-color: rgba(255, 255, 255, 0.95); 312 | border-radius: 5px; 313 | overflow: hidden; 314 | font-size: 14px; 315 | } 316 | 317 | .tp-video-set{ 318 | width: 400px; 319 | height: 300px; 320 | } 321 | 322 | 323 | .tp-alert-ok{ 324 | width: 50px; 325 | background-color: #e05865; 326 | color: #fff; 327 | padding: 4px 10px; 328 | border-radius: 5px; 329 | text-align: center; 330 | margin: 5px auto; 331 | cursor: pointer; 332 | } 333 | .tp-closeset{ 334 | position:absolute; 335 | top: 0; 336 | right:0; 337 | padding:4px; 338 | cursor:pointer; 339 | color:#000; 340 | font-weight: 600; 341 | font-size: 1.4em; 342 | } 343 | .tp-alert-container{ 344 | padding: 20px 345 | } 346 | .tp-alert-container .tp-screenshot-canvas{ 347 | height: auto; 348 | width: 300px 349 | } 350 | .tp-settable{ 351 | margin:0 auto; 352 | cursor:default; 353 | } 354 | .tp-video-set>h4{ 355 | margin: 0 0 8px 0; 356 | padding: 10px 20px; 357 | background-color: rgb(243, 93, 93); 358 | color: #fff; 359 | } 360 | .tp-syk { 361 | padding: 10px 10px; 362 | position: relative; 363 | display: inline-block; 364 | color: #fff; 365 | top: -7px; 366 | vertical-align: bottom; 367 | } 368 | .tp-s-tranger { 369 | position: relative; 370 | height: 10px; 371 | width:80px; 372 | margin-left: 30px; 373 | top: 10px; 374 | background-color: rgba(142, 129, 129, 0.6); 375 | border-radius: 4px; 376 | cursor: pointer; 377 | overflow:hidden; 378 | } 379 | .tp-s-tranger>.tp-s-tranger-a { 380 | position: absolute; 381 | left: 0; 382 | top: 0; 383 | width: 10%; 384 | height: 100%; 385 | background-color: #e33d3d; 386 | border-radius: 4px 0 0 4px; 387 | } 388 | .tp-tranger { 389 | position: relative; 390 | height: 11px; 391 | background-color: rgba(0, 0, 0, 0.17); 392 | border-radius: 6px; 393 | cursor: pointer; 394 | overflow: hidden; 395 | margin-top: 18px; 396 | margin-left: 80px; 397 | margin-right: 170px; 398 | } 399 | .tp-tranger>.tp-tranger-a { 400 | position: relative; 401 | display: inline-block; 402 | background-color: rgb(248, 73, 73); 403 | height: 100%; 404 | width: 0; 405 | border-radius: 6px; 406 | z-index: 3; 407 | } 408 | .tp-tranger>.tp-tranger-b { 409 | position: relative; 410 | display: inline-block; 411 | background-color: #FFFFFF; 412 | height: 100%; 413 | width: 11px; 414 | border-radius: 50%; 415 | right: 16px; 416 | z-index: 5; 417 | } 418 | .tp-tranger>.tp-tranger-c { 419 | position: absolute; 420 | top: 0; 421 | width: 0%; 422 | height: 100%; 423 | background-color: rgba(207, 198, 198, 0.47); 424 | border-radius: 6px; 425 | z-index: 2; 426 | overflow: hidden; 427 | } 428 | .tp-syk-ico { 429 | position: absolute; 430 | top: 22px; 431 | left:12px; 432 | font-size: 1.6em; 433 | cursor:default; 434 | } 435 | 436 | /*loding*/ 437 | .tp-oneplay{ 438 | width: 120px; 439 | height: 111px; 440 | z-index: 999; 441 | background-color: rgb(234, 62, 73); 442 | cursor: pointer; 443 | border-radius: 10px; 444 | } 445 | .tp-oneplay>svg{ 446 | width: 100px; 447 | height: 100px; 448 | fill: #fff; 449 | margin-left: 10px; 450 | } 451 | .tp-acenter{ 452 | position: absolute; 453 | top: 0; 454 | left: 0; 455 | bottom: 0; 456 | right: 0; 457 | margin: auto; 458 | } 459 | .tp-spinner { 460 | width: 76px; 461 | height: 40px; 462 | z-index: 7; 463 | display: none; 464 | } 465 | .tp-suspend { 466 | -webkit-animation-play-state: paused !important; 467 | animation-play-state: paused !important; 468 | } 469 | .md-iframe { 470 | display: none; 471 | } 472 | .tp-place2 { 473 | background-color: #3b3b3b; 474 | margin: 2px 0 4px 0; 475 | color: #fff; 476 | cursor: pointer; 477 | } 478 | .tp-spinner > div { 479 | background-color: #fff; 480 | height: 100%; 481 | width: 6px; 482 | display: inline-block; 483 | -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; 484 | animation: sk-stretchdelay 1.2s infinite ease-in-out; 485 | border: 1px solid #dadada; 486 | } 487 | .tp-spinner .rect2 { 488 | -webkit-animation-delay: -1.1s; 489 | animation-delay: -1.1s; 490 | } 491 | .tp-spinner .rect3 { 492 | -webkit-animation-delay: -1.0s; 493 | animation-delay: -1.0s; 494 | } 495 | .tp-spinner .rect4 { 496 | -webkit-animation-delay: -0.9s; 497 | animation-delay: -0.9s; 498 | } 499 | .tp-spinner .rect5 { 500 | -webkit-animation-delay: -0.8s; 501 | animation-delay: -0.8s; 502 | } 503 | @-webkit-keyframes sk-stretchdelay { 504 | 0%, 40%, 100% { 505 | -webkit-transform: scaleY(0.4) 506 | } 507 | 20% { 508 | -webkit-transform: scaleY(1.0) 509 | } 510 | } 511 | @keyframes sk-stretchdelay { 512 | 0%, 40%, 100% { 513 | transform: scaleY(0.4); 514 | -webkit-transform: scaleY(0.4); 515 | } 516 | 20% { 517 | transform: scaleY(1.0); 518 | -webkit-transform: scaleY(1.0); 519 | } 520 | } 521 | .video-full { 522 | width: 20px; 523 | padding-right: 30px; 524 | top: 9px; 525 | position: relative; 526 | padding-left: 10px; 527 | height: 30px; 528 | cursor: pointer; 529 | fill: #fff; 530 | } 531 | 532 | :-webkit-full-screen .tp-video-main { 533 | height: 100% !important; 534 | width: 100% !important; 535 | position: fixed; 536 | left: 0; 537 | top: 0; 538 | right: 0; 539 | bottom: 0; 540 | } 541 | :-moz-full-screen .tp-video-main { 542 | height: 100% !important; 543 | width: 100% !important; 544 | position: fixed; 545 | left: 0; 546 | top: 0; 547 | right: 0; 548 | bottom: 0; 549 | } 550 | :-ms-fullscreen .tp-video-main { 551 | height: 100% !important; 552 | width: 100% !important; 553 | position: fixed; 554 | left: 0; 555 | top: 0; 556 | right: 0; 557 | bottom: 0; 558 | } 559 | :-full-screen .tp-video-main { 560 | height: 100% !important; 561 | width: 100% !important; 562 | position: fixed; 563 | left: 0; 564 | top: 0; 565 | right: 0; 566 | bottom: 0; 567 | } 568 | :fullscreen .tp-video-main { 569 | height: 100% !important; 570 | width: 100% !important; 571 | position: fixed; 572 | left: 0; 573 | top: 0; 574 | right: 0; 575 | bottom: 0; 576 | } 577 | .tp-con { 578 | position: absolute; 579 | top: -90px; 580 | display: none; 581 | width: 150px; 582 | margin: 0 auto; 583 | padding: 6px; 584 | background-color: rgba(255, 255, 255, 0.75); 585 | border-radius: 6px; 586 | overflow: hidden; 587 | } 588 | .tp-color { 589 | display: inline-block; 590 | position: absolute; 591 | top: 18px; 592 | right: 15px; 593 | border-radius: 4px; 594 | cursor: pointer; 595 | z-index: 7; 596 | } 597 | .tp-color-w{ 598 | float: left; 599 | } 600 | .tp-color-warp { 601 | height: 60px; 602 | overflow-y: scroll; 603 | overflow-x: hidden; 604 | } 605 | .tp-color-main { 606 | width: 20px; 607 | height: 20px; 608 | border: 1px solid #FFFFFF; 609 | border-radius: 2px; 610 | } 611 | .tp-color-bo { 612 | position: relative; 613 | bottom: 8px; 614 | width: 20px; 615 | height: 20px; 616 | border-radius: 50%; 617 | border: 1px solid #8b8585; 618 | } 619 | .tp-place { 620 | text-align: center; 621 | padding-bottom: 4px; 622 | } 623 | .tp-rightmenu { 624 | display: none; 625 | position: absolute; 626 | overflow: hidden; 627 | width: 130px; 628 | margin: 0; 629 | padding: 0; 630 | list-style: none; 631 | border-radius: 4px; 632 | background: rgba(28, 28, 28, 0.9); 633 | border: none; 634 | text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px; 635 | color: #fff; 636 | z-index: 9999; 637 | } 638 | .tp-rightmenu a { 639 | color: #fff; 640 | text-decoration: none; 641 | } 642 | .tp-rightmenu li { 643 | padding: 2px 0 2px 8px; 644 | cursor: pointer; 645 | } 646 | .tp-rightmenu li:hover { 647 | padding-left: 7px; 648 | background-color: rgba(255,255,255,0.2); 649 | } 650 | .tp-search-user{ 651 | display: none; 652 | } 653 | ul.tp-speend { 654 | display: none; 655 | margin: 4px 0 4px 30px; 656 | } 657 | 658 | .tp-copy-input{ 659 | display: block; 660 | width: 100%; 661 | height: 19px; 662 | overflow: hidden; 663 | padding: 0; 664 | margin: 0; 665 | background-color: transparent; 666 | border: 0; 667 | color: #fff; 668 | resize: none; 669 | cursor: pointer; 670 | font-size: 15px; 671 | line-height: 21px; 672 | overflow:hidden; 673 | font-family: Avenir Next,Helvetica,Arial,Lantinghei SC,Microsoft YaHei,sans-serif; 674 | } 675 | .tp-control-alltime-phone{ 676 | display: none; 677 | } 678 | .tp-loding{ 679 | position: absolute; 680 | width: 100%; 681 | height: 100%; 682 | top: 0; 683 | left: 0; 684 | z-index: 20; 685 | 686 | } 687 | .tp-loding-img-warp{ 688 | height: 120px; 689 | width: 120px; 690 | box-sizing: content-box; 691 | border: 8px solid rgba(200, 200, 200, 0.63); 692 | border-radius: 50%; 693 | animation:lodingborder 1s infinite alternate; 694 | -webkit-animation:lodingborder 1s infinite alternate; 695 | overflow: hidden; 696 | } 697 | @keyframes lodingborder 698 | { 699 | to { border: 14px solid rgba(200, 200, 200, 0.63);} 700 | } 701 | @-webkit-keyframes lodingborder 702 | { 703 | to { border: 14px solid rgba(200, 200, 200, 0.63);} 704 | } 705 | .tp-loding-img{ 706 | background-image: url(http://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac3/02.gif); 707 | width: 120px; 708 | height: 120px; 709 | background-repeat: no-repeat; 710 | background-position: center; 711 | background-size: 100px; 712 | background-color: rgb(255, 255, 255); 713 | } 714 | .tp-loding-text{ 715 | color: #ffffff; 716 | text-align: center; 717 | position: absolute; 718 | bottom: 30%; 719 | width: 100% 720 | } 721 | .tp-img-back{ 722 | position: absolute; 723 | width: 100%; 724 | height: 100%; 725 | background-size: cover; 726 | -webkit-filter: blur(10px); 727 | -moz-filter: blur(10px); 728 | -ms-filter: blur(10px); 729 | filter: blur(10px); 730 | z-index: 2; 731 | overflow: hidden; 732 | } 733 | .noflash-alert{ 734 | display:none; 735 | } 736 | section.clearfix.wp.area.player { 737 | z-index: 99; 738 | } 739 | .off-light{ 740 | position: fixed; 741 | top: 0; 742 | left: 0; 743 | z-index: 50; 744 | background-color: #000; 745 | width: 100%; 746 | height: 100%; 747 | } 748 | @media screen and (max-width: 700px) { 749 | .tp-tranger{ 750 | position: absolute; 751 | width: 97%; 752 | bottom: 4px; 753 | margin: 0; 754 | } 755 | .tp-video-con>.tp-send{ 756 | bottom: 60px; 757 | left: initial; 758 | right: 10%; 759 | width: 80%; 760 | } 761 | .tp-control-alltime{ 762 | display: none; 763 | } 764 | .tp-control-alltime-phone{ 765 | display: inline-block; 766 | } 767 | } 768 | /*animation*/ 769 | .tp-zoomoutdown{ 770 | animation:zoomOutDown .5s; 771 | -webkit-animation:zoomOutDown .5s; 772 | } 773 | @keyframes zoomOutDown { 774 | 40% { 775 | opacity: 1; 776 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 777 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 778 | } 779 | 780 | to { 781 | opacity: 0; 782 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 783 | transform-origin: center bottom; 784 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 785 | } 786 | } 787 | @-webkit-keyframes zoomOutDown { 788 | 40% { 789 | opacity: 1; 790 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 791 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 792 | } 793 | 794 | to { 795 | opacity: 0; 796 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 797 | transform-origin: center bottom; 798 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 799 | } 800 | } 801 | .tp-zoomoutup{ 802 | animation:zoomInUp .5s; 803 | -webkit-animation:zoomInUp .5s; 804 | } 805 | @keyframes zoomInUp { 806 | from { 807 | opacity: 0; 808 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 809 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 810 | } 811 | 812 | 60% { 813 | opacity: 1; 814 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 815 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 816 | } 817 | } 818 | @-webkit-keyframes zoomInUp { 819 | from { 820 | opacity: 0; 821 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 822 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 823 | } 824 | 825 | 60% { 826 | opacity: 1; 827 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 828 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 829 | } 830 | } 831 | @media screen and (max-width: 470px) { 832 | .tp-syk{ 833 | display: none; 834 | } 835 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | module.exports = { 3 | entry: './src/index.js', 4 | output: { 5 | filename: 'tplayer.js', 6 | path: path.resolve(__dirname, 'dist') 7 | },module: { 8 | rules:[ 9 | { 10 | test: /\.js$/, 11 | loader:"babel-loader", 12 | include: /src/, 13 | exclude: /node_modules/, 14 | options: { 15 | presets: ['es2015'] 16 | } 17 | },{ 18 | test: /\.css$/, 19 | loader: 'style-loader!css-loader', 20 | include: /src/, 21 | exclude: /node_modules/ 22 | },{ 23 | test: /\.(png|jpg)$/, 24 | loader: 'url-loader', 25 | include: /src/, 26 | exclude: /node_modules/ 27 | } 28 | 29 | ] 30 | } 31 | }; --------------------------------------------------------------------------------