| Index: branches/new-upload/phase3/js2/mwEmbed/example_usage/SequencerPlayer_Seeking.html |
| — | — | @@ -2,7 +2,7 @@ |
| 3 | 3 | <html> |
| 4 | 4 | <head> |
| 5 | 5 | <title>mv_embed Seeking Example</title> |
| 6 | | - <script type="text/javascript" src="../mv_embed.js"></script> |
| | 6 | + <script type="text/javascript" src="../mv_embed.js?debug=true"></script> |
| 7 | 7 | <style> |
| 8 | 8 | #render_box { |
| 9 | 9 | position:absolute; |
| Index: branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvPlayList.js |
| — | — | @@ -95,7 +95,13 @@ |
| 96 | 96 | |
| 97 | 97 | //if style is set override width and height |
| 98 | 98 | if(element.style.width)this.width = parseInt(element.style.width.replace('px','')); |
| 99 | | - if(element.style.height)this.height = parseInt(element.style.height.replace('px','')); |
| | 99 | + if(element.style.height)this.height = parseInt(element.style.height.replace('px','')); |
| | 100 | + |
| | 101 | + //if controls=false hide the title and the controls: |
| | 102 | + if(this.controls===false){ |
| | 103 | + this.pl_layout.control_height=0; |
| | 104 | + this.pl_layout.title_bar_height=0; |
| | 105 | + } |
| 100 | 106 | }, |
| 101 | 107 | //the element has now been swapped into the dom: |
| 102 | 108 | on_dom_swap:function(){ |
| — | — | @@ -371,30 +377,40 @@ |
| 372 | 378 | renderDisplay:function(){ |
| 373 | 379 | js_log('mvPlaylist:renderDisplay:: track length: ' +this.default_track.getClipCount() );'' |
| 374 | 380 | |
| 375 | | - var plObj=this; |
| | 381 | + var _this=this; |
| 376 | 382 | //setup layout for title and dc_ clip container |
| | 383 | + |
| | 384 | + |
| | 385 | + //add the playlist controls: |
| | 386 | + |
| | 387 | + //append container and videoPlayer; |
| 377 | 388 | $j(this).html('<div id="dc_'+this.id+'" style="width:'+this.width+'px;' + |
| 378 | | - 'height:'+(this.height+this.pl_layout.title_bar_height + this.pl_layout.control_height)+'px;position:relative;">' + |
| 379 | | - ' <div style="font-size:13px;border:solid thin;width:'+this.width+'px;" id="ptitle_'+this.id+'"></div>' + |
| 380 | | - '</div>'); |
| 381 | | - |
| 382 | | - //add the playlist controls: |
| 383 | | - $j('#dc_'+plObj.id).append( |
| 384 | | - '<div class="videoPlayer" style="position:absolute;top:'+(plObj.height+plObj.pl_layout.title_bar_height+4)+'px">' + |
| 385 | | - '<div id="mv_embedded_controls_'+plObj.id+'" class="ui-widget ui-corner-bottom ui-state-default controls" '+ |
| 386 | | - 'style="width:' + plObj.width + 'px" >' + |
| 387 | | - plObj.getControlsHTML() + |
| 388 | | - '</div>'+ |
| 389 | | - '</div>' |
| 390 | | - ); |
| 391 | | - |
| 392 | | - //add the play button: |
| 393 | | - $j('#dc_'+plObj.id).append( |
| 394 | | - this.cur_clip.embed.getPlayButton() |
| 395 | | - ); |
| 396 | | - //once the controls are in the DOM add hooks: |
| 397 | | - ctrlBuilder.addControlHooks(this); |
| 398 | | - |
| | 389 | + 'height:'+(this.height+this.pl_layout.title_bar_height + this.pl_layout.control_height)+'px;position:relative;">' + |
| | 390 | + '</div>'); |
| | 391 | + if(this.controls==true){ |
| | 392 | + //append title & controler: |
| | 393 | + $j('#dc_'+_this.id).append( |
| | 394 | + '<div style="font-size:13px;border:solid thin;width:'+this.width+'px;" id="ptitle_'+this.id+'"></div>' + |
| | 395 | + '<div class="videoPlayer" style="position:absolute;top:'+(_this.height+_this.pl_layout.title_bar_height+4)+'px">' + |
| | 396 | + '<div id="mv_embedded_controls_'+_this.id+'" class="ui-widget ui-corner-bottom ui-state-default controls" '+ |
| | 397 | + 'style="width:' + _this.width + 'px" >' + |
| | 398 | + _this.getControlsHTML() + |
| | 399 | + '</div>'+ |
| | 400 | + '</div>' |
| | 401 | + ); |
| | 402 | + |
| | 403 | + //add the play button: |
| | 404 | + $j('#dc_'+_this.id).append( |
| | 405 | + this.cur_clip.embed.getPlayButton() |
| | 406 | + ); |
| | 407 | + //once the controls are in the DOM add hooks: |
| | 408 | + ctrlBuilder.addControlHooks(this); |
| | 409 | + }else{ |
| | 410 | + //just append the video: |
| | 411 | + $j('#dc_'+_this.id).append( |
| | 412 | + '<div class="videoPlayer" style="position:absolute;top:'+(_this.height+_this.pl_layout.title_bar_height+4)+'px"></div>' |
| | 413 | + ); |
| | 414 | + } |
| 399 | 415 | this.setupClipDisplay(); |
| 400 | 416 | |
| 401 | 417 | //update the title and status bar |
| — | — | @@ -404,10 +420,15 @@ |
| 405 | 421 | js_log('mvPlaylist:setupClipDisplay:: clip len:'+ this.default_track.clips.length); |
| 406 | 422 | var _this = this; |
| 407 | 423 | $j.each(this.default_track.clips, function(i, clip){ |
| 408 | | - $j('#dc_'+_this.id).append('<div class="clip_container cc_" id="clipDesc_'+clip.id+'" '+ |
| 409 | | - 'style="display:none;position:absolute;text-align: center;border:solid thin;width:'+_this.width + 'px;'+ |
| | 424 | + var cout = '<div class="clip_container cc_" id="clipDesc_'+clip.id+'" '+ |
| | 425 | + 'style="display:none;position:absolute;text-align: center;width:'+_this.width + 'px;'+ |
| 410 | 426 | 'height:'+(_this.height )+'px;'+ |
| 411 | | - 'top:' + this.title_bar_height + 'px;left:0px"></div>'); |
| | 427 | + 'top:' + this.title_bar_height + 'px;left:0px;'; |
| | 428 | + if(_this.controls){ |
| | 429 | + cout+='border:solid thin black;'; |
| | 430 | + } |
| | 431 | + cout+='"></div>'; |
| | 432 | + $j('#dc_'+_this.id).append( cout ); |
| 412 | 433 | //update the embed html: |
| 413 | 434 | clip.embed.height=_this.height; |
| 414 | 435 | clip.embed.width=_this.width; |
| — | — | @@ -501,7 +522,7 @@ |
| 502 | 523 | } |
| 503 | 524 | }, |
| 504 | 525 | getPlayHeadPos: function(prec_done){ |
| 505 | | - var plObj = this; |
| | 526 | + var _this = this; |
| 506 | 527 | if($j('#mv_seeker_'+this.id).length==0){ |
| 507 | 528 | //js_log('no playhead so we can\'t get playhead pos' ); |
| 508 | 529 | return 0; |
| — | — | @@ -513,7 +534,7 @@ |
| 514 | 535 | for(var i in this.default_track.clips){ |
| 515 | 536 | var clip = this.default_track.clips[i]; |
| 516 | 537 | if(this.cur_clip.id ==clip.id)break; |
| 517 | | - perc_offset+=(clip.embed.duration / plObj.getDuration()); |
| | 538 | + perc_offset+=(clip.embed.duration / _this.getDuration()); |
| 518 | 539 | time_offset+=clip.embed.duration; |
| 519 | 540 | } |
| 520 | 541 | //run any update time line hooks: |
| — | — | @@ -655,7 +676,7 @@ |
| 656 | 677 | }, |
| 657 | 678 | //playlist play |
| 658 | 679 | play: function(){ |
| 659 | | - var plObj=this; |
| | 680 | + var _this=this; |
| 660 | 681 | //js_log('pl play'); |
| 661 | 682 | //hide the playlist play button: |
| 662 | 683 | $j('#big_play_link_'+this.id).hide(); |
| — | — | @@ -761,25 +782,25 @@ |
| 762 | 783 | }, |
| 763 | 784 | doSeek:function(v){ |
| 764 | 785 | js_log('pl:doSeek:' + v + ' sts:' + this.seek_time_sec ); |
| 765 | | - var plObj = this; |
| | 786 | + var _this = this; |
| 766 | 787 | var prevClip=null; |
| 767 | 788 | |
| 768 | 789 | //jump to the clip in the current percent. |
| 769 | 790 | var perc_offset=0; |
| 770 | 791 | var next_perc_offset=0; |
| 771 | | - for(var i in plObj.default_track.clips){ |
| 772 | | - var clip = plObj.default_track.clips[i]; |
| 773 | | - next_perc_offset+=( clip.getDuration() / plObj.getDuration()) ; |
| | 792 | + for(var i in _this.default_track.clips){ |
| | 793 | + var clip = _this.default_track.clips[i]; |
| | 794 | + next_perc_offset+=( clip.getDuration() / _this.getDuration()) ; |
| 774 | 795 | //js_log('on ' + clip.getDuration() +' next_perc_offset:'+ next_perc_offset); |
| 775 | 796 | if( next_perc_offset > v ){ |
| 776 | 797 | //pass along the relative percentage to embed object: |
| 777 | 798 | //js_log('seek:'+ v +' - '+perc_offset + ') / (' + next_perc_offset +' - '+ perc_offset); |
| 778 | 799 | var relative_perc = (v -perc_offset) / (next_perc_offset - perc_offset); |
| 779 | 800 | //update the current clip: |
| 780 | | - plObj.updateCurrentClip( clip ); |
| | 801 | + _this.updateCurrentClip( clip ); |
| 781 | 802 | |
| 782 | 803 | //update the clip relative seek_time_sec |
| 783 | | - plObj.cur_clip.embed.doSeek( relative_perc ); |
| | 804 | + _this.cur_clip.embed.doSeek( relative_perc ); |
| 784 | 805 | this.play(); |
| 785 | 806 | return ''; |
| 786 | 807 | } |
| — | — | @@ -788,24 +809,24 @@ |
| 789 | 810 | }, |
| 790 | 811 | setCurrentTime: function(pos, callback){ |
| 791 | 812 | js_log('pl:setCurrentTime:' + pos + ' sts:' + this.seek_time_sec ); |
| 792 | | - var plObj = this; |
| | 813 | + var _this = this; |
| 793 | 814 | var prevClip=null; |
| 794 | 815 | |
| 795 | 816 | //jump to the clip at pos |
| 796 | 817 | var currentOffset = 0; |
| 797 | 818 | var nextTime = 0; |
| 798 | | - for (var i in plObj.default_track.clips) { |
| 799 | | - var clip = plObj.default_track.clips[i]; |
| | 819 | + for (var i in _this.default_track.clips) { |
| | 820 | + var clip = _this.default_track.clips[i]; |
| 800 | 821 | nextTime = clip.getDuration(); |
| 801 | 822 | if (currentOffset + nextTime > pos) { |
| 802 | 823 | //update the clip relative seek_time_sec |
| 803 | 824 | clipTime = pos - currentOffset; |
| 804 | | - if (plObj.cur_clip.id != clip.id) { |
| 805 | | - plObj.updateCurrentClip( clip ); |
| | 825 | + if (_this.cur_clip.id != clip.id) { |
| | 826 | + _this.updateCurrentClip( clip ); |
| 806 | 827 | } |
| 807 | | - plObj.cur_clip.embed.setCurrentTime(clipTime, callback); |
| 808 | | - plObj.currentTime = pos; |
| 809 | | - plObj.doSmilActions(); |
| | 828 | + _this.cur_clip.embed.setCurrentTime(clipTime, callback); |
| | 829 | + _this.currentTime = pos; |
| | 830 | + _this.doSmilActions(); |
| 810 | 831 | return ''; |
| 811 | 832 | } |
| 812 | 833 | currentOffset += nextTime; |
| — | — | @@ -832,7 +853,7 @@ |
| 833 | 854 | var pl_duration = _this.getDuration(); |
| 834 | 855 | |
| 835 | 856 | var cur_pixle=0; |
| 836 | | - //set up plObj |
| | 857 | + //set up _this |
| 837 | 858 | |
| 838 | 859 | //js_log("do play head total dur: "+pl_duration ); |
| 839 | 860 | $j.each(this.default_track.clips, function(i, clip){ |
| — | — | @@ -871,9 +892,9 @@ |
| 872 | 893 | //set up hover for prev,next |
| 873 | 894 | var th = 50; |
| 874 | 895 | var tw = th*this.pl_layout.clip_aspect; |
| 875 | | - var plObj = this; |
| 876 | | - $j('#mv_prev_link_'+plObj.id+',#mv_next_link_'+plObj.id).hover(function() { |
| 877 | | - var clip = (this.id=='mv_prev_link_'+plObj.id) ? plObj.getPrevClip() : plObj.getNextClip(); |
| | 896 | + var _this = this; |
| | 897 | + $j('#mv_prev_link_'+_this.id+',#mv_next_link_'+_this.id).hover(function() { |
| | 898 | + var clip = (this.id=='mv_prev_link_'+_this.id) ? _this.getPrevClip() : _this.getNextClip(); |
| 878 | 899 | if(!clip) |
| 879 | 900 | return js_log('missing clip for Hover'); |
| 880 | 901 | //get the position of #mv_perv|next_link: |
| — | — | @@ -925,9 +946,9 @@ |
| 926 | 947 | }, |
| 927 | 948 | swapClipDesc: function(req_clipID, callback){ |
| 928 | 949 | //hide all but the requested |
| 929 | | - var plObj=this; |
| 930 | | - js_log('r:'+req_clipID+' cur:'+plObj.id); |
| 931 | | - if(req_clipID==plObj.cur_clip.id){ |
| | 950 | + var _this=this; |
| | 951 | + js_log('r:'+req_clipID+' cur:'+_this.id); |
| | 952 | + if(req_clipID==_this.cur_clip.id){ |
| 932 | 953 | js_log('no swap to same clip'); |
| 933 | 954 | }else{ |
| 934 | 955 | //fade out clips |
| — | — | @@ -944,7 +965,7 @@ |
| 945 | 966 | }); |
| 946 | 967 | //fade in requested clip *and set req_clip to current |
| 947 | 968 | $j('#clipDesc_'+req_clipID).fadeIn("slow", function(){ |
| 948 | | - plObj.cur_clip = req_clip; |
| | 969 | + _this.cur_clip = req_clip; |
| 949 | 970 | if(callback) |
| 950 | 971 | callback(); |
| 951 | 972 | }); |
| — | — | @@ -1200,20 +1221,20 @@ |
| 1201 | 1222 | stop:function(){ |
| 1202 | 1223 | js_log('pl:do stop'); |
| 1203 | 1224 | //set up convenience pointer to parent playlist |
| 1204 | | - var plObj = this.pc.pp; |
| | 1225 | + var _this = this.pc.pp; |
| 1205 | 1226 | |
| 1206 | | - var th=Math.round( plObj.pl_layout.clip_desc * plObj.height ); |
| 1207 | | - var tw=Math.round( th * plObj.pl_layout.clip_aspect ); |
| | 1227 | + var th=Math.round( _this.pl_layout.clip_desc * _this.height ); |
| | 1228 | + var tw=Math.round( th * _this.pl_layout.clip_aspect ); |
| 1208 | 1229 | //run the parent stop: |
| 1209 | 1230 | this.pe_stop(); |
| 1210 | | - var pl_height = (plObj.sequencer=='true')?plObj.height+27:plObj.height; |
| | 1231 | + var pl_height = (_this.sequencer=='true')?_this.height+27:_this.height; |
| 1211 | 1232 | |
| 1212 | 1233 | this.getHTML(); |
| 1213 | 1234 | |
| 1214 | 1235 | }, |
| 1215 | 1236 | play:function(){ |
| 1216 | 1237 | //js_log('pl eb play'); |
| 1217 | | - var plObj = this.pc.pp; |
| | 1238 | + var _this = this.pc.pp; |
| 1218 | 1239 | //check if we are already playing |
| 1219 | 1240 | if( !this.thumbnail_disp ){ |
| 1220 | 1241 | this.pe_play(); |
| Index: branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvSequencer.js |
| — | — | @@ -266,7 +266,7 @@ |
| 267 | 267 | } |
| 268 | 268 | $j('#'+this.video_container_id).html('<playlist ' + src_attr + |
| 269 | 269 | ' style="width:' + this.video_width + 'px;height:' + this.video_height + 'px;" '+ |
| 270 | | - ' sequencer="true" id="' + this.plObj_id + '" />'); |
| | 270 | + ' controls="false" id="' + this.plObj_id + '" />'); |
| 271 | 271 | rewrite_by_id( this.plObj_id ); |
| 272 | 272 | setTimeout(this.instance_name +'.checkReadyPlObj()', 25); |
| 273 | 273 | }, |
| Index: branches/new-upload/phase3/js2/mwEmbed/libEmbedVideo/embedVideo.js |
| — | — | @@ -163,26 +163,13 @@ |
| 164 | 164 | '$j.ui', //include dialog for pop-ing up thigns |
| 165 | 165 | '$j.ui.dialog' |
| 166 | 166 | ], function(){ |
| 167 | | - $j('playlist').each(function(){ |
| 168 | | - //check if we are in sequence mode load sequence libs (if not already loaded) |
| 169 | | - if( $j(this).attr('sequencer')=="true" ){ |
| 170 | | - var pl_element = this; |
| 171 | | - //load the mv_sequencer and the json util lib: |
| 172 | | - mvJsLoader.doLoad([ |
| 173 | | - 'mvSeqPlayList' |
| 174 | | - ],function(){ |
| 175 | | - var seqObj = new mvSeqPlayList( pl_element ); |
| 176 | | - mvEmbed.swapEmbedVideoElement( pl_element, seqObj ); |
| 177 | | - } |
| 178 | | - ); |
| 179 | | - }else{ |
| 180 | | - //create new playlist interface: |
| 181 | | - var plObj = new mvPlayList( this ); |
| 182 | | - mvEmbed.swapEmbedVideoElement(this, plObj); |
| 183 | | - var added_height = plObj.pl_layout.title_bar_height + plObj.pl_layout.control_height; |
| 184 | | - //move into a blocking display container with height + controls + title height: |
| 185 | | - $j('#'+plObj.id).wrap('<div style="display:block;height:' + (plObj.height + added_height) + 'px;"></div>'); |
| 186 | | - } |
| | 167 | + $j('playlist').each(function(){ |
| | 168 | + //create new playlist interface: |
| | 169 | + var plObj = new mvPlayList( this ); |
| | 170 | + mvEmbed.swapEmbedVideoElement(this, plObj); |
| | 171 | + var added_height = plObj.pl_layout.title_bar_height + plObj.pl_layout.control_height; |
| | 172 | + //move into a blocking display container with height + controls + title height: |
| | 173 | + $j('#'+plObj.id).wrap('<div style="display:block;height:' + (plObj.height + added_height) + 'px;"></div>'); |
| 187 | 174 | }); |
| 188 | 175 | }); |
| 189 | 176 | } |