var ohead = document.getelementsbytagname('head').item(0); var oscript= document.createelement("script"); oscript.type = "text/javascript"; oscript.src="/mas/js/playersjs/mp4box.all.min.js"; ohead.appendchild( oscript); function setuplogostyle(element,elecfg) { element.src = elecfg.logourl; element.style.opacity = elecfg.logoalpha; switch (elecfg.logocss) { case "rt": element.style.right = 0; element.style.top = 0; break; case "lb": element.style.left = 0; element.style.bottom = "60px"; break; case "rb": element.style.right = 0; element.style.bottom = "60px"; break; default: element.style.left = 0; element.style.top = 0; } } function logoerrhandle(imgelement) { console.log("logo load error !so remove itself from player"); imgelement.parentnode.removechild(imgelement); } /*播放器logo设置结束*/ var mp4boxfile; var masp = { ispc: true }; function browserredirect() { var suseragent = navigator.useragent.tolowercase(); var bisipad = suseragent.match(/ipad/i) == "ipad"; var bisiphoneos = suseragent.match(/iphone os/i) == "iphone os"; var bisiphone = suseragent.match(/iphone/i) == "iphone"; var bismidp = suseragent.match(/midp/i) == "midp"; var bisuc7 = suseragent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bisuc = suseragent.match(/ucweb/i) == "ucweb"; var bisandroid = suseragent.match(/android/i) == "android"; var bisce = suseragent.match(/windows ce/i) == "windows ce"; var biswm = suseragent.match(/windows mobile/i) == "windows mobile"; if (bisipad || bisiphoneos || bisiphone || bismidp || bisuc7 || bisuc || bisandroid || bisce || biswm) { masp.ispc = false; } else { masp.ispc = true; } } function createvideo(temp,callback){ var config = {}; config.starttime = temp.starttime == undefined?0:temp.starttime; // 虚拟剪辑 播放开始时间点 config.endtime = temp.endtime == undefined?0:temp.endtime; // 虚拟剪辑 播放结束时间点 config.srcurl = temp.srcurl; config.poster = temp.poster==undefined?"":temp.poster; config.subtitles = temp.subtitles==undefined?"":temp.subtitles; config.pcautoplay = temp.pcautoplay; config.playercfg = temp.playercfg; if(config.srcurl == undefined){ alert(temp + "参数未设置");return} browserredirect(); var videocontainer = document.getelementsbyclassname("video_container")[0]; //logo占位显示 videocontainer.innerhtml += ''; videocontainer.innerhtml += '
\
\
00:00
\
00:00
\
\
\
\
\
\
\
00:00
\
\
\
\ \ \
\
\
\ \ \
\
\
\ \
\
\
'; //增加中间的播放按钮 videocontainer.innerhtml += ''; //增加音量调节百分比显示 videocontainer.innerhtml += '
'; videocontainer.innerhtml +=''; $('#customvideo').bind('contextmenu', function(){return false;}); var videocontrols = document.getelementbyid('videocontrols'), video = document.getelementbyid('customvideo'), play = document.getelementbyid('play'), progresscontainer = document.getelementbyid("progress"), progressholder = document.getelementbyid("progress_box"), playprogressbar = document.getelementbyid("play_progress"), progressline = document.getelementbyid("progress_line"), progresslinetime = document.getelementbyid("progress_line_time"), progresstext = document.getelementbyid('progresstext'), videodurationtext = document.getelementbyid('videodurationtext'); bufferprogress = document.getelementbyid('buffer_progress'), totalprogress = document.getelementbyid('progress_total'), fullscreentogglebutton = document.getelementbyid("fullscreen"), videovolumn = document.getelementbyid("videovolumn"), videovolumntotal = document.getelementsbyclassname("video_volumn_total")[0], videovolumnvolume = document.getelementsbyclassname("video_volumn_volume")[0], videovolumnicon = document.getelementsbyclassname("video_volumn_head")[0], volumnholder = document.getelementsbyclassname("video_volumn_box")[0], defaulttrack = document.getelementbyid("defaulttrack"), centerplayericon = document.getelementbyid("centerplayericon"), currentvolume = document.getelementbyid("currentvolume"), watermark = document.getelementbyid("water_mark"), streams_menu = document.getelementbyid("streams_menu"), isvideovolumnon = true, videovolumncur = 0, // boolean that allows us to "remember" the current size of the video player. isvideofullscreen = false, playprogressinterval = null, currentlinetime=0; // for(var key in config.srcurl){ // if (object.keys( config.srcurl).slice(0,1) == key) { // $("#streams_menu").append('
  • '+ config.srcurl[key].label +'
  • '); // $('.dropdown-toggle').html(config.srcurl[key].label); // } else { // $("#streams_menu").append('
  • '+ config.srcurl[key].label +'
  • '); // } // } /** * 修正显示排序 */ var streams= ["h","m","l"]; /** * 码流相关变量 */ var duration = config.endtime-config.starttime, zerotime="--:--"; var currenttimedis = 0,configedplaybackrate = 1; /** * 外部调用seek播放使用的变量 */ var seeks = -1,seeke = -1; var cutpage = false; for (var i=0;i < object.keys( config.srcurl).length;i++){ if (i == 0){ $("#streams_menu").append('
  • '+ config.srcurl[streams[i]].label +'
  • '); $('#bitstream_desc').html(config.srcurl[streams[i]].label); } else { $("#streams_menu").append('
  • '+ config.srcurl[streams[i]].label +'
  • '); } } //设置控制样式 if (config.playercfg != undefined ){ setuplogostyle(watermark, config.playercfg); } else { $.ajax({ url:"/mas/service/jsonplayerconfig", async:false, success : function(msg) { config.playercfg = eval("(" + msg + ")"); setuplogostyle(watermark,config.playercfg); }, error:function() { logoerrhandle(watermark); } }); } if (config.playercfg.enableplaybackrate == false){ var target = document.getelementbyid("playbackrate_select"); target.parentnode.removechild(target); } else { var ratedata = config.playercfg.playbackrate.split(";") var normalrate = (ratedata.indexof("1") == -1) && (ratedata.indexof("1.0")==-1) && (ratedata.indexof("1.00")==-1); for(var i=0; i< ratedata.length;i++){ var temp = ratedata[i]; if (number(temp)==1 || (normalrate == true && i==0)){ $("#playbackrate_menu").append('
  • '+ temp + "x" +'
  • '); $('#playbackrate_desc').html(ratedata[i]+"x"); configedplaybackrate = ratedata[i]; } else { $("#playbackrate_menu").append('
  • '+ temp +"x" +'
  • '); } } } $('#playbackrate_menu').each(function(){ $(this).find('li').on('click',function(){ if ($('#playbackrate_desc').html() == $(this).html()){ } else { $('#playbackrate_desc').html($(this).html()); $(this).addclass("blue").siblings().removeclass("blue"); } configedplaybackrate = $(this).html().slice(0,$(this).html().length-1); video.playbackrate = configedplaybackrate; }); }); $('#streams_menu').each(function(){ $(this).find('li').on('click',function(){ if ($('#bitstream_desc').html() == config.srcurl[$(this).attr("value")].label){ return; } $('#bitstream_desc').html(config.srcurl[$(this).attr("value")].label); $(this).addclass("blue").siblings().removeclass("blue"); seeks = video.currenttime; duration = video.duration; var paused = video.paused; zerotime = videoplayer.formattime(seeks).time4; $("#customvideo").attr("src",config.srcurl[$(this).attr("value")].httpurl); video.load(); if (paused){ } else { video.play(); } video.playbackrate = configedplaybackrate; }); }); var videoplayer = { init : function() { // this is equal to the videoplayer object. var that = this; // this.addsource('../frag_bunny.mp4'); this.addsourcesrc(config.srcurl[object.keys( config.srcurl).slice(0,1)].httpurl); video.playbackrate = configedplaybackrate; // helpful css trigger for js. document.documentelement.classname = 'js'; // get rid of the default controls, because we'll use our own. video.removeattribute('controls'); // when meta data is ready, show the controls video.addeventlistener('loadeddata', this.initializecontrols, false); video.addeventlistener('loadeddata',this.autoplay,false); // video.addeventlistener('loadedmetadata',this.catchmediainfo,false); // 当浏览器正在下载指定的音频/视频时,会发生 progress 事件。 video.addeventlistener('progress',this.videobufferedprogress, false); // when play, pause buttons are pressed. // 当浏览器能够开始播放指定的音频/视频时,发生 canplay 事件 video.addeventlistener('canplay',function(){ if(video.readystate == 4){ bufferprogress.style.width = "100%"; } else { var curwidth = number(bufferprogress.style.width.replace('%','')); (function addwidth(){ bufferprogress.style.width = (curwidth) + (i++) + "%"; if(number(bufferprogress.style.width.replace('%','')) >= 100){ bufferprogress.style.width = "100%"; cleartimeout(allbufferprogressinterval); }else{ var allbufferprogressinterval = settimeout(addwidth, 50); } })(i=1); } },false); video.addeventlistener("timeupdate",function(){ if (video.playbackrate != configedplaybackrate){ video.playbackrate = configedplaybackrate; } if(config.endtime > 0 && this.currenttime >= config.endtime){ video.pause(); video.currenttime= config.starttime; videoplayer.stoptrackingplayprogress(); } //标引段播放 if (seeks >= 0 && seeke > seeks){ if(seeke <= video.duration && video.currenttime > seeke){ if(cutpage){ seeks = -1; cutpage = false; video.pause(); } else { video.currenttime = seeks; video.pause(); } } } }); video.addeventlistener("error", function(errevent) { var errcode = -1; var networkstate = -1; var readystate = -1; try { errcode = errevent.target.error.code; networkstate = errevent.target.networkstate; readystate = errevent.target.readystate; alert("无法播放(错误码:" + errcode + ", 网络码:" + networkstate + ")" + errevent.target.src); } catch (e) { // 会catch video 和 track 两个控件的错误 track 无code信息会抛出异常 //alert("无法播放,且获取不到错误码: " + errevent.target.src); } }, true); this.handlebuttonpresses(); // 进度条监听事件 this.videoscrubbing(); // volumn监听事件 this.videovolumn(); // when the full screen button is pressed... fullscreentogglebutton.addeventlistener("click", function(){ isvideofullscreen ? that.fullscreenoff() : that.fullscreenon(); }, true); //监听页面全屏事件 document.addeventlistener("fullscreenchange", this.fullscreenchange); document.addeventlistener("mozfullscreenchange", this.fullscreenchange); document.addeventlistener("webkitfullscreenchange", this.fullscreenchange); document.addeventlistener("msfullscreenchange", this.fullscreenchange); }, addsourcesrc:function(srcurl) { video.poster=config.poster; video.src = srcurl; defaulttrack.src = config.subtitles; //js中给video 和track的src赋值或变更src,需要手动load一次 video.load(); }, addsource: function(asseturl){ window.url = window.url || window.webkiturl; var xhr = new xmlhttprequest; xhr.open('get', asseturl, true); xhr.responsetype = 'blob'; xhr.onload = function(){ if(this.status == 200 && this.readystate == 4){ var blob = this.response; console.log(blob); var reader = new filereader(); video.onload = function(e){ window.url.revokeobjecturl(video.src); } video.src =window.url.createobjecturl(blob); // video.style.display = 'block'; } } xhr.send(); }, videobufferedprogress: function(){ if(video.buffered.length){ var bufferpercent = video.buffered.end(0)/video.duration * 100; bufferprogress.style.width = bufferpercent + '%'; } }, initializecontrols : function() { // when all meta information has loaded, show controls // videodurationtext.innerhtml = videoplayer.formattime(duration <= 0 ?video.duration:duration).time4; progresstext.innerhtml = zerotime + "/" + videoplayer.formattime(duration <= 0 ?video.duration:duration).time4; if (seeks >= 0){ video.currenttime = seeks; } else { video.currenttime=config.starttime; } if (typeof callback === "function"){ callback(this); } else { videoplayer.showhidecontrols(true); } }, showhidecontrols : function(show) { if(show){ // shows and hides the video player. video.addeventlistener('mouseover', function() { videocontrols.style.opacity = 1; }, false); videocontrols.addeventlistener('mouseover', function() { videocontrols.style.opacity = 1; }, false); video.addeventlistener('mouseout', function() { videocontrols.style.opacity = 0; }, false); videocontrols.addeventlistener('mouseout', function() { videocontrols.style.opacity = 0; }, false); } else { videocontrols.style.opacity = 1; } }, handlebuttonpresses : function() { // when the video or play button is clicked, play/pause the video. video.addeventlistener('click', this.playpause, false); play.addeventlistener('click', this.playpause, false); // when the play button is pressed, // switch to the "pause" symbol. video.addeventlistener('play', function() { play.title = '暂停'; play.innerhtml = ''; // begin tracking video's progress. videoplayer.trackplayprogress(); centerplayericon.style.opacity = 0; }, false); // when the pause button is pressed, // switch to the "play" symbol. video.addeventlistener('pause', function() { play.title = '播放'; play.innerhtml = ''; videoplayer.stoptrackingplayprogress(); centerplayericon.style.opacity = 1; }, false); // when the video has concluded, pause it. video.addeventlistener('ended', function() { seeks = 0; videoplayer.updateplayprogress(); this.currenttime = config.starttime; this.pause(); }, false); }, playpause: function() { if ( video.paused || video.ended ) { if ( video.ended ) { video.currenttime = config.starttime; } video.play(); } else { video.pause(); } //video.playbackrate = configedplaybackrate; }, fullscreenon : function() { // set new width according to window width // videocontainer.webkitrequestfullscreen(); function fullscreen(element) { if (element.requestfullscreen) { element.requestfullscreen(); // firefox ,chrome } else if (element.webkitrequestfullscreen) { element.webkitrequestfullscreen(); //chrome } else if (element.mozrequestfullscreen) { element.mozrequestfullscreen(); //firefox } else if (element.msrequestfullscreen){ element.msrequestfullscreen(); } } fullscreen(videocontainer); // videocontainer.style.csstext = 'position: fixed; width:100%; height:100%'; // apply a classname to the video and controls, if the designer needs it... // videocontrols.style.csstext = 'position: fixed;'; // fullscreentogglebutton.innerhtml = ''; // fullscreentogglebutton.title = '退出'; // 全屏状态下 esc被屏蔽 //document.addeventlistener('keydown', this.checkkeycode, false); }, fullscreenoff : function() { function exitfullscreen() { if (document.fullscreenelement ) { document.exitfullscreen(); } else if (document.mozcancelfullscreen) { document.mozcancelfullscreen(); } else if (document.webkitexitfullscreen) { document.webkitexitfullscreen(); } else if (document.msexitfullscreen){ //edge document.msexitfullscreen(); } } exitfullscreen(); // videocontainer.style.position = 'fixed'; // fullscreentogglebutton.innerhtml = ''; // fullscreentogglebutton.title = '全屏'; // videocontrols.style.csstext = ''; }, // determines if the escape key was pressed. checkkeycode : function( e ) { e = e || window.event; if ( (e.keycode || e.which) === 27 ){ videoplayer.fullscreenoff(); } }, fullscreenchange : function(){ if(isvideofullscreen) { fullscreentogglebutton.innerhtml = ''; fullscreentogglebutton.title = '全屏'; } else { fullscreentogglebutton.innerhtml = ''; fullscreentogglebutton.title = '退出'; } isvideofullscreen = !isvideofullscreen; }, // every 1 seconds, update the play progress. trackplayprogress : function(){ (function progresstrack() { videoplayer.updateplayprogress(); playprogressinterval = settimeout(progresstrack, 1000); })(); }, updateplayprogress : function(){ currenttimedis = video.currenttime<=0?seeks:video.currenttime; currenttimedis = currenttimedis < 0? 0:currenttimedis; playprogressbar.style.width = ( ((currenttimedis -config.starttime) / (duration <= 0 ? video.duration:duration)) * (progressholder.offsetwidth) ) + "px"; progresstext.innerhtml = videoplayer.formattime(currenttimedis-config.starttime).time4 + "/" + videoplayer.formattime(duration <= 0 ?video.duration:duration).time4;; }, // video was stopped, so stop updating progress. stoptrackingplayprogress : function(){ cleartimeout( playprogressinterval ); }, videoscrubbing : function() { progressholder.addeventlistener('mouseenter', function(){ if ($("#bitstream_desc").attr("aria-expanded") == "true" || $("#playbackrate_desc").attr("aria-expanded") == "true"){ return; } progressline.style.display = 'block'; // video.pause(); // videoplayer.stoptrackingplayprogress(); progressholder.onmousemove = function(e) { //videoplayer.setplayprogress( e.pagex ); videoplayer.setplayprogress( e.offsetx < 0 ? 0:e.offsetx ); } },false); progressholder.addeventlistener('mouseleave', function(e){ progressline.style.display = 'none'; progressholder.onmousemove = null; },true); progressholder.addeventlistener('click',function(e){ video.currenttime = currentlinetime + config.starttime; videoplayer.updateplayprogress(); video.play(); video.playbackrate = configedplaybackrate; }); }, setplayprogress : function( clickx ) { progressline.style.left = clickx - progressline.offsetwidth/2 + 'px'; var newpercent = (progressline.offsetleft + progressline.offsetwidth/2)/progresscontainer.offsetwidth; currentlinetime = (duration <= 0 ? video.duration:duration) * newpercent; progresslinetime.innerhtml = videoplayer.formattime(currentlinetime).time4; }, videovolumn: function() { video.volume= 0.5; videovolumnvolume.style.width = '50px'; if(video.muted) muteon(); volumnholder.addeventlistener("mousedown", function(e){ if(video.muted) video.muted=false; video.volume = math.floor(e.offsetx)/100; videovolumnvolume.style.width = video.volume * 100 + '%'; videoplayer.volumnicon(video.volume); volumnholder.onmousemove = function(e) { video.volume = math.floor(e.offsetx)/100; videovolumnvolume.style.width = video.volume * 100 + '%'; videoplayer.volumnicon(video.volume); } document.onmouseup = function(e) { volumnholder.onmouseup = null; volumnholder.onmousemove = null; volumnholder.onmousemove = null; } }, true); volumnholder.addeventlistener('mouseup', function(e){ volumnholder.onmousemove = null; volumnholder.onmouseup = null; }); volumnholder.addeventlistener('click',function(e){ if(video.muted) video.muted=false; video.volume = math.floor(e.offsetx)/100; videovolumnvolume.style.width = video.volume * 100 + '%'; videoplayer.volumnicon(video.volume); }); videovolumnicon.addeventlistener('click',function(){ isvideovolumnon?videoplayer.muteon():videoplayer.muteoff(); /* * ecmas6 在chrome和firefox上正常,其它浏览器上语法报错 isvideovolumnon ? (() => { videovolumncur = video.volumn; video.volumn = 0; videovolumnvolume.style.width = video.volumn * 100 + '%'; videoplayer.volumnicon(0); isvideovolumnon = false; return; })() : (() => { video.volumn = videovolumncur; videovolumnvolume.style.width = video.volumn * 100 + '%'; videoplayer.volumnicon(videovolumncur); isvideovolumnon = true; return; })(); */ }); }, muteon:function(){ videovolumncur = video.volume; video.volume = 0; videovolumnvolume.style.width = video.volume * 100 + '%'; videoplayer.volumnicon(0); isvideovolumnon = false; }, muteoff:function(){ video.muted = false; video.volume = videovolumncur; videovolumnvolume.style.width = video.volume * 100 + '%'; videoplayer.volumnicon(videovolumncur); isvideovolumnon = true; }, volumnicon: function(volumn){ if (volumn == 0) { videovolumnicon.innerhtml = '' } else if (0 < volumn && volumn <= 0.3) { videovolumnicon.innerhtml = ''; } else if (0.3 < volumn && volumn <= 0.7) { videovolumnicon.innerhtml = ''; } else if (0.7 < volumn && volumn <= 1) { videovolumnicon.innerhtml = ''; } $("#currentvolume").show(); currentvolume.innerhtml = '音量:' + math.floor(volumn * 100) + '%'; settimeout(function(){ $("#currentvolume").hide(); },1500); }, formattime: function(timestr){ timestr = math.floor(timestr*1000) var timeobj = {}; var time=new date(); if(typeof timestr!="undefined"){ time=new date(number(timestr)); } function addzero(num){ return num < 10 ? '0' + num : num; } var year=time.getfullyear(); var month=addzero(time.getmonth()+1); var day=addzero(time.getdate()); var week=time.getday(); var weekstr="日一二三四五六"; var hour=addzero(time.getutchours()); var minute=addzero(time.getminutes()); var second=addzero(time.getseconds()); var standardtime=year+"年"+month+"月"+day+"日 星期"+weekstr.charat(week)+" "+hour+":"+minute+":"+second; var fulldate = year+"-"+month+"-"+day; var date=month+"月"+day+"日"; var handm = hour+":"+minute; var mands = minute+':'+second; var handmands = (hour=="00"?"":hour+ ":")+minute +":"+second; var originaltime = new date(0); var diftime = (time - originaltime)/1000; timeobj.standardtime = standardtime; timeobj.fulldate = fulldate; timeobj.date = date; timeobj.time = handm; timeobj.time2 = mands; timeobj.time3 = addzero(math.floor(diftime-diftime%60)/60)+':'+addzero(diftime%60); timeobj.time4 = handmands; return timeobj; }, seektime:function(begin,end){ //该方法再初始化后调用,此时video的元数据还未开始加载... seeks = begin; seeke = end; //标引自动播放 videoplayer.playpause(); }, seekframes:function(nr_of_frames, fps) { if (video.paused == false) { video.pause(); } var currentframes = video.currenttime * fps; var newpos = (currentframes + parseint(nr_of_frames)) / fps; newpos = newpos + 0.00001; // fixes a safari seek issue. myvdieo.currenttime = 0.04 would give smpte 00:00:00:00 wheras it should give 00:00:00:01 video.currenttime = newpos.tofixed(3); // tell the player to go here progresstext.innerhtml = videoplayer.formattime(video.currenttime).time4 + "/" + videoplayer.formattime(video.duration).time4; return video.currenttime; }, /* 剪辑页面方法 begin */ editplay:function(begin,end){ //该方法在loadeddata方法中回调,此时元数据已加载,需要重新设置currenttime,进行seek播放 videoplayer.showhidecontrols(false); videoplayer.playpause(); }, seekto:function(position){ video.currenttime = position; videoplayer.updateplayprogress(); video.pause(); }, playclip:function(from,to){ //预览片段,预览后需要清除from和to的标记 cutpage = true; video.currenttime = from; seeks = from; seeke = to; if(video.paused) video.play(); }, /* 剪辑页面方法end*/ /*video 状态属性start*/ getcurrenttime:function(){ return video.currenttime; }, /*video 状态属性end*/ /* autoplay start*/ autoplay:function(){ if(masp.ispc){ if(config.playercfg.autoplay == true){ //ie 自动播放 var promise = video.play(); //chrome,firefox,edge能够播放就播放,不能正常播放就静音播放 if (promise !== undefined) { promise.then(function() { // autoplay started! edge、chrome if(video.muted) { video.muted = false; } if(video.paused) { video.play(); } }).catch(function() { // autoplay was prevented. // show a "play" button so that user can start playback. videoplayer.muteon(); video.play(); }); } } } }, /*auto play end*/ catchmediainfo:function(){ console.log("video has buffed: " + video.buffered.length); mp4boxfile = mp4box.createfile(); // 设置 range 请求 const range = 'bytes=0-50000'; fetch(video.src, { }).then(function(response) { console.log("response:" + response); return response.arraybuffer(); }).then(function(arraybuffer) { // mp4box 需要自定起点 console.log("arraybuffer:" + arraybuffer); arraybuffer.filestart = 0; mp4boxfile.appendbuffer(arraybuffer); mp4boxfile.flush(); }); mp4boxfile.onmoovstart = function () { log.info("application", "starting to parse movie information"); } mp4boxfile.onready = function (info) { console.log(info); console.log('mime: ' + info.mime); console.log('duration: ' + parseint(info.duration / 1000) + 's'); console.log('brands: ' + info.brands.join(',')); console.log('video metadata: '); const videotrack = info.tracks[0]; console.log('video codec: "' + videotrack.codec + '"; nb_samples: ' + videotrack.nb_samples); console.log(videotrack.name + ': size: ' + videotrack.size + '; bitrate: ' + videotrack.bitrate); console.log('audio metadata'); const audiotrack = info.tracks[1]; console.log('audio codec: "' + audiotrack.codec + '"; nb_samples: ' + audiotrack.nb_samples); console.log(audiotrack.name + ': size: ' + audiotrack.size + '; bitrate: ' + audiotrack.bitrate); } } }; videoplayer.init(); return videoplayer; }