某网站的videojs的配置及操作
一、总结
一句话总结:
多参照参照别人的例子就好,省事
1、videojs如何获取用户当前视频的位置?
this.currentTime()
2、回到视频开始处?
player.currentTime(0);
二、内容在总结中
1 options={ 2 playbackRates: [1,1.25,1.5,1.75,2], 3 controlBar: { 4 volumePanel: { 5 inline: false //默认是true,横着的 6 } 7 } 8 }; 9 10 player=videojs('my-video',options); 11 12 player.ready(function() { 13 this.hotkeys({ 14 volumeStep: 0.1, 15 seekStep: 5, 16 enableVolumeScroll: false, 17 enableModifiersForNumbers: false 18 }); 19 }); 20 21 player.on('ended',function(){ 22 hourid=player.now_hourid; 23 24 if(nv>1){ 25 oldposter=$('.video-js').attr('oldposter'); 26 27 $('.vjs-poster').css({'background-image':oldposter}); 28 $('#my-video_html5_api').attr({'poster':oldposter}); 29 30 notice_go(); 31 32 $('.fullscreen').appendTo('.video-js').show(); 33 $('.vrepeat').appendTo('.video-js').show(); 34 35 nv=vlogo; 36 }else{ 37 ajaxvideo(hourid); 38 $('.vjs-poster').css({'background-image':'none'}); 39 $('#my-video_html5_api').attr({'poster':''}); 40 player.play(); 41 } 42 }); 43 44 player.on('play',function(){ 45 if(nv==1){ 46 $('.vjs-control-bar').hide(); 47 }else{ 48 $('.vjs-control-bar').show(); 49 50 if(player.srecordok){ 51 srecord(); 52 } 53 } 54 55 notice_go(); 56 57 }); 58 59 player.on('pause',function(){ 60 clearInterval(srobj); 61 }); 62 63 //学习记录 64 function srecord(){ 65 srobj=setInterval(function(){ 66 cid='46'; 67 hid=player.now_hourid; 68 run=player.currentTime(); 69 70 $.post('/Online/srecord',{'cid':cid,'hid':hid,'run':run}); 71 },5000); 72 } 73 74 player.on('timeupdate',function(){ 75 uid="8063"; 76 ctime=player.currentTime(); 77 78 if(!uid){ 79 if(ctime>=30){ 80 this.pause(); 81 notice_go(); 82 $('.plogin,.fullscreen').show(); 83 return false; 84 } 85 } 86 }); 87 88 function notice_go(){ 89 $('.buycourse,.readcourse,.plogin,.vrepeat,.flogin,.fullscreen,.srecord').hide(); 90 } 91 92 function ajaxvideo(hourid){ 93 clearInterval(srobj); 94 95 $.ajax({ 96 type:'post', 97 url:'/online/getvideo', 98 data:{'hourid':hourid,'nv':nv,'md5_token':md5_token}, 99 async:false, 100 dataType:'json', 101 success:function(free){ 102 if(free.s=='1'){ 103 nv++; 104 player.src({'src':free.m3,'type':'application/x-mpegURL'}); 105 player.now_hourid=hourid; 106 player.srecordok=free.srecordok; 107 108 $('.vjs-playback-rate-value').html('1x'); 109 $('.vjs-menu-item').removeClass('vjs-selected'); 110 $('.vjs-menu-item').last().addClass('vjs-selected'); 111 112 $('.chapter_hour_str').html(free.chapter_hour_str); 113 $('.l-footer').html(free.prev_next); 114 $('.readcourse').html(free.welcome); 115 $('.vrepeat').html(free.next_end); 116 } 117 118 ajax_free=free; 119 } 120 }); 121 return ajax_free; 122 } 123 124 ajaxvideo(hourid); 125 126 $('.srecord .pvrepeat_replay').click(function(){ 127 player.currentTime(srow_run); 128 player.play(); 129 }); 130 131 $('.srecord .vrepeat_next').click(function(){ 132 player.currentTime(0); 133 player.play(); 134 }); 135 136 // 到达上次记录 137 if(srow_run){ 138 $('.fullscreen').show(); 139 $('.srecord').show(); 140 } 141 142 $('.nofabu').click(function(){ 143 alert('亲,该节视频还未更新,每周都会有更新的,敬请关注'); 144 return false; 145 }); 146 147 $('.filedown').click(function(){ 148 id=this.id; 149 obj=$(this); 150 uid="8063"; 151 152 player.pause(); 153 154 if(uid){ 155 $.ajax({ 156 type:'post', 157 url:'/filedown', 158 data:{id:id}, 159 async:false, 160 success:function(rst){ 161 if(rst!='0'){ 162 obj.attr({'href':rst}); 163 compute(); 164 }else{ 165 notice_go(); 166 $('.fullscreen,.buycourse').show(); 167 } 168 } 169 }); 170 }else{ 171 notice_go(); 172 $('.fullscreen,.flogin').show(); 173 } 174 175 }); 176 177 $('.rightvideoli').click(function(){ 178 $('.rightvideoli').find('.mylearnhour1').css({'color':'#F78080'}); 179 $('.rightvideoli').find('.gohour').css({'color':'#000'}); 180 $('.rightvideoli').find('.mybackground').hide(); 181 182 $(this).find('.mybackground').show(); 183 $(this).find('.mylearnhour1,.gohour').css({'color':'#fff'}); 184 }); 185 186 $('.rightfileli').mouseenter(function(){ 187 $('.rightfileli').find('.mylearnhour1').css({'color':'#F78080'}); 188 $('.rightfileli').find('.filedown').css({'color':'#000'}); 189 $('.rightfileli').find('.mybackground3').hide(); 190 191 $(this).find('.mybackground3').show(); 192 $(this).find('.mylearnhour1,.filedown').css({'color':'#fff'}); 193 }); 194 195 $('.rightfileli').mouseleave(function(){ 196 $(this).find('.mybackground3').hide(); 197 $('.rightfileli').find('.mylearnhour1').css({'color':'#F78080'}); 198 $('.rightfileli').find('.filedown').css({'color':'#000'}); 199 }); 200 201 $('.nofabu').mouseenter(function(){ 202 $('.nofabu').find('.mylearnhour2').css({'color':'#a8a8a8'}); 203 $('.nofabu').find('.gohour2').css({'color':'#000'}); 204 $('.nofabu').find('.mybackground2').hide(); 205 206 $(this).find('.mybackground2').show(); 207 $(this).find('.mylearnhour2,.gohour2').css({'color':'#fff'}); 208 }); 209 210 $('.nofabu').mouseleave(function(){ 211 $(this).find('.mybackground2').hide(); 212 $(this).find('.gohour2').css({'color':'#000'}); 213 $('.nofabu').find('.mylearnhour2').css({'color':'#a8a8a8'}); 214 }); 215 216 $('body').delegate('.gohour,.return-prev,.return-next','click',function(){ 217 hourid=$(this).attr('hourid'); 218 sort=$(this).attr('sort'); 219 220 nv=vlogo; 221 222 oldposter=$('.video-js').attr('oldposter'); 223 $('.vjs-poster').css({'background-image':'url('+oldposter+')'}); 224 $('#my-video_html5_api').attr({'poster':oldposter}); 225 226 ajax_res=ajaxvideo(hourid); 227 228 menu_item(sort); 229 230 notice_go(); 231 if(ajax_res.acl>0){ 232 233 $('.fullscreen,.readcourse').finish().show(); 234 $('.fullscreen,.readcourse').finish().fadeOut(2000); 235 }else{ 236 $('.fullscreen,.buycourse').show(); 237 } 238 }); 239 240 $('body').delegate('.vp_next,.vrepeat_replay','click',function(){ 241 hourid=$(this).attr('hourid'); 242 sort=$(this).attr('sort'); 243 244 nv=vlogo; 245 246 oldposter=$('.video-js').attr('oldposter'); 247 $('.vjs-poster').css({'background-image':'url('+oldposter+')'}); 248 $('#my-video_html5_api').attr({'poster':oldposter}); 249 250 ajax_res=ajaxvideo(hourid); 251 252 menu_item(sort); 253 254 notice_go(); 255 if(ajax_res.acl>0){ 256 257 $('.fullscreen,.vrepeat').finish().show(); 258 $('.fullscreen,.vrepeat').finish().fadeOut(2000); 259 }else{ 260 $('.fullscreen,.buycourse').show(); 261 } 262 }); 263 264 menu_n="2"; 265 menu_item(menu_n); 266 267 function menu_item(menu_n){ 268 $('.rightvideoli').find('.gohour').css({'color':'#000'}); 269 $('.rightvideoli').find('.mylearnhour1').css({'color':'#F78080'}); 270 $('.rightvideoli').find('.mybackground').hide(); 271 272 $('.rightvideoli').eq(menu_n-1).find('.gohour,.mylearnhour1').css({'color':'#fff'}); 273 $('.rightvideoli').eq(menu_n-1).find('.mybackground').show(); 274 }