播放器宽度自适应 · 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> ~~~