播放器寬度自適應 · TP5常用代碼

[TOC] ## 播放器寬度設置 ### 1、引入文件 ~~~ <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="/static/plugins/ckplayer/ckplayer/ckplayer.js"></script> ~~~ ### 2、HTML ~~~  <div data-widget-videoarea="videoarea" class="videoArea" id="block-B" data-block-name="播放器">  </div>   <div class="videoArea-rightWrap" id="movieListContainer"> <div style="height:100%" id="block-D" data-block-name="聯播列表"> <div class="listcontrol-pack dn" id="jujiPlayListShow"> <a href="javascript:void(0);" j-delegate="showPlayList" title="展開列表" rseat="展開列表"> <div class="listcontrol-pack-con"> <i class="site-icons-play icon-listcontrol-left"></i> <em class="listcontrol-pack-txt">展開列表</em> </div> </a> </div> </div> ~~~ ### 3、事件觸發播放器寬度設置 = 總容器寬度 - 右側列表寬度 ~~~ <script type="text/javascript"> setTimeout(function(){ var _width = $('.videoArea-flash').width(); var list_width = $('#movieListContainer').width(); $('#block-B').width(_width-list_width); var videoObject = { container: '.videoArea',//“#”代表容器的ID，“.”或“”代表容器的class variable: 'player',//該屬性必需設置，值等于下面的new chplayer()的對象 flashplayer:false,//如果強制使用flashplayer則設置成true video:'http://112.25.9.182:8088/he.yinyuetai.com/uploads/videos/common/AEC701641B5D4B59F3BF5CED42431BE1.mp4' //視頻地址 }; var player=new ckplayer(videoObject); },500); </script> ~~~ ### 4、在線視頻學貓叫MV： ~~~ http://112.25.9.182:8088/he.yinyuetai.com/uploads/videos/common/AEC701641B5D4B59F3BF5CED42431BE1.mp4 ~~~ ## 播放器寬度自適應當頁面尺寸變化，那么播放器的尺寸也要隨之而發生變化，做到自適應頁面變化，會出發一個事件resize() 分兩個步驟：一是頁面變化，需要重新設置相應元素的寬度二是播放器也要重新設置最新的寬度 ~~~ <script type="text/javascript"> setTimeout(function(){ resizes(); var videoObject = { container: '.videoArea',//“#”代表容器的ID，“.”或“”代表容器的class variable: 'player',//該屬性必需設置，值等于下面的new chplayer()的對象 flashplayer:false,//如果強制使用flashplayer則設置成true video:'{$video.url}'//視頻地址 }; var player=new ckplayer(videoObject); },500); $(window).resize(function(){ resizes(); }); function resizes(){ setTimeout(function(){ var _width = $('.videoArea-flash').width(); var list_width = $('#movieListContainer').width(); $('#block-B').width(_width-list_width); },300); } </script> ~~~