互联网
首页 > 互联网> > 微信公众号视频如何上传竖版的视频 ，上传竖屏视频后也强制变成了16:9

微信公众号视频如何上传竖版的视频 ，上传竖屏视频后也强制变成了16:9

作者：互联网

在微信公众号中上传竖版视频时，可能会遇到视频在播放器中自动调整为16:9的情况。这是因为微信公众号内置的视频播放器默认处理视频为16:9的宽高比。但是，你可以通过一些方法来解决这个问题。

解决方案

  1. 使用腾讯视频平台上传竖版视频。
  2. 调整嵌入代码中的宽高比。
  3. 使用自定义样式覆盖默认样式。

详细步骤

1. 使用腾讯视频平台上传竖版视频

  1. 登录腾讯视频平台。
  2. 上传竖版视频。
  3. 获取视频ID。

2. 调整嵌入代码中的宽高比

在微信公众号中嵌入腾讯视频时，可以通过自定义样式来调整视频的宽高比。

示例代码

假设你已经上传了一个竖版视频，并获得了视频ID（例如 v3566994h0p）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .video-container {
      position: relative;
      padding-bottom: 177.78%; /* 9:16 宽高比 */
      height: 0;
      overflow: hidden;
    }

    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="video-container">
    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=v3566994h0p" allowfullscreen></iframe>
  </div>
</body>
</html>

HTML

详细解释

  1. 创建容器：

    • .video-container 是一个相对定位的容器，用于包含视频。
    • padding-bottom 设置为 177.78%，这是基于 9:16 的宽高比计算得出的。

  2. 使用绝对定位：

    • iframe 使用绝对定位，使其填充整个容器。

3. 使用自定义样式覆盖默认样式

如果上述方法仍然不能解决问题，可以尝试使用更具体的CSS选择器来覆盖默认样式。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .video-container {
      position: relative;
      padding-bottom: 177.78%; /* 9:16 宽高比 */
      height: 0;
      overflow: hidden;
    }

    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* 覆盖腾讯视频播放器的默认样式 */
    .videojs-tech {
      width: 100% !important;
      height: 100% !important;
    }
  </style>
</head>
<body>
  <div class="video-container">
    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=v3566994h0p" allowfullscreen></iframe>
  </div>
</body>
</html>

HTML

详细解释

  1. 创建容器：

    • .video-container 是一个相对定位的容器，用于包含视频。
    • padding-bottom 设置为 177.78%，这是基于 9:16 的宽高比计算得出的。

  2. 使用绝对定位：

    • iframe 使用绝对定位，使其填充整个容器。

  3. 覆盖默认样式：

    • .videojs-tech 是腾讯视频播放器内部的一个元素，通过覆盖其样式，确保视频填充整个容器。

如果仍然存在问题

如果以上方法仍然不能解决问题，可能是因为微信公众号的内置播放器对竖版视频的支持有限。你可以考虑以下替代方案：

  1. 使用第三方视频平台：如B站、优酷等，这些平台可能有更好的竖版视频支持。
  2. 自定义视频播放器：使用自定义的HTML5视频播放器，并上传竖版视频。

示例代码：使用自定义HTML5视频播放器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .video-container {
      position: relative;
      padding-bottom: 177.78%; /* 9:16 宽高比 */
      height: 0;
      overflow: hidden;
    }

    .video-container video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="video-container">
    <video controls>
      <source src="https://example.com/path/to/video.mp4" type="video/mp4">
      您的浏览器不支持 HTML5 video 标签。
    </video>
  </div>
</body>
</html>

HTML

详细解释

  1. 创建容器：

    • .video-container 是一个相对定位的容器，用于包含视频。
    • padding-bottom 设置为 177.78%，这是基于 9:16 的宽高比计算得出的。

  2. 使用绝对定位：

    • video 使用绝对定位，使其填充整个容器。

标签：
来源：