·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]html5视频与视频缩图比例一致的问题处理方式

时间:2017-08-31 11:15酷播
[html5]html5视频与视频缩图比例一致的问题处理方式

[html5]html5视频与视频缩图比例一致的问题处理方式

  1. <div class="image-wrap"> 
  2.   <video id="videoxx" width="默认大小" height="默认大小" poster="默认poster"><source /></video> 
  3. </div> 
  4.  
  5. <script language="js部分"> 
  6.   $("videoxx").设置onload = function() { 
  7.     aspect_ratio = this.videoWidth / this.videoHeight; 
  8.     // 根据得到的宽高比来算video标签高度 
  9.     $("videoxx").width=this.videoWidth<img-wrap宽度 ? this.videoWidth : img-wrap宽度; 
  10.     $("videoxx").height=$("videoxx").height/aspect_ratio; 
  11.     // FIXME: 根据poster的情况可以考虑裁剪或者重新指定另外一张poster 
  12.   } 
  13. </script> 
  14.  
  15. 作者:劳永超 
  16. 链接:https://www.zhihu.com/question/20989836/answer/21869702 
  17. 来源:知乎 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器