Video.js调整视频封面大小的问题

原文地址：http://blog.csdn.net/qq_20777797/article/details/53263796

在使用video.js插件播放视频时，屏幕窗口的大小是可以调整的，但是海报图片的大小却不能跟着屏幕大小的改变而改变，也无法直接限制它的大小，会导致因上传图片的大小不同而导致布局参差不齐。

解决办法：

详细的video.js的用法可参考：http://www.jq22.com/jQuery-info404

[html] view plain copy

1. <video  class='vjs-default-skin'  controls preload='none' width='220px' height='158px' poster='' data-setup='{}' >  

[html] view plain copy

1. <source src="http://v.cctv.com/flash/mp4video6/TMS/2011/01/05/cf752b1c12ce452b3040cab2f90bc265_h264818000nero_aac32-1.mp4" type='video/mp4' />  

poster=' '是放置封面图片的，在此就不放封面图片了，而是把封面设置为背景图片，再通过backgroundSize和backgroundPosition来调节背景图片的大小和位置就好了

[javascript] view plain copy

1. var blocks = document.getElementsByTagName('video');  
2.   
3.   
4. for (var i=0;i<blocks.length;i++) {  
5.     var valuedata = datas[i];  
6.         blocks[i].style.background ='transparent url("'+urlpic+valuedata.coverDir+'")  no-repeat';  
7.     blocks[i].style.backgroundSize='210px 150px';  
8.     blocks[i].style.backgroundPosition='5px,0px';  
9. }