自适应高度-设置方法

  • 插件名称:Mine云点播
  • 适用版本:1.4.7+
  • 适用范围:上传至阿里云视频点播和腾讯云点播的视频

Web播放器自适应高度,一直是一个比较棘手的问题,没有一个完全通过的解决方案。

本插件根据视频的原始宽高比例,来实现播放器高度的自适应,视频的原始宽高数据来自云点播平台,因此本文介绍的方法,只适用于上传至阿里云视频点播和腾讯云点播的视频。

Aliplayer和Tcplayer的使用方法是一致的,下面以Tcplayer来做具体说明。

视频分为长视频(高度大于宽度)和宽视频(宽度大于高度)两种格式,我们分别介绍这两种格式。

长视频

长视频一般常见于手机拍摄的视频,
由于这种视频的特性(高度大于宽度),
我们设置一个固定并且合适的宽度(比如:300px),
然后高度设置为auto,
插件会自动根据视频的原始宽高比例计算出相应的高度,
如此这样来实现播放高度自适应,
如下图所示:

宽视频

宽视频比较常见,
放在页面中一般占用上层容器的100%,
这样看起来比较大气?
所以我把把宽视频的宽度设置到最大(即100%),
高度设置为auto即可。
但是如果宽度100%太宽了,您也可以将宽度设置为一个具体数值,如:750px
如下图所示