video自适应宽高比

视频自适应宽高比是指在不同尺寸的屏幕上播放视频时，保持视频的宽高比不变，以适应不同尺寸的设备屏幕，同时不会出现图像拉伸或者畸变的情况。实现视频自适应宽高比的方法有多种，其中一种常见的方法是通过CSS样式来控制视频容器的宽高比，具体实现方式为设置视频容器的padding-bottom属性值为百分比数值，该百分比数值即为视频的宽高比，然后将视频设置为绝对定位，并且设置宽度和高度均为100%。这样，在不同尺寸的屏幕上播放视频时，视频容器的高度会根据屏幕宽度自适应缩放，从而保持视频的宽高比不变。

相关问题

vue 自适应宽高比

Vue 自适应宽高比是一种前端技术，用于实现在不同宽高比的设备上自适应显示图片或视频等元素，保持其原有的宽高比不变，不会出现变形或者拉伸的情况。

具体实现方式为，在外层容器设置一个固定的宽度和一个相对高度的百分比值，然后在内层容器中设置一个绝对定位的元素，并给这个元素设置一个固定的宽度和一个相对高度的百分比值，这样，内层容器中的元素就能够根据外层容器的宽高比自适应显示，并保持原有的宽高比不变。

例如，可以通过下面的代码来实现一个 16:9 的自适应视频播放器：

<div class="video-container" style="width:100%;height:0;padding-bottom:56.25%;position:relative;">
  <div class="video-wrapper" style="position:absolute;top:0;left:0;width:100%;height:100%;">
    <video src="video.mp4" style="width:100%;height:100%;" controls></video>
  </div>
</div>

其中，外层容器 `.video-container` 的 `padding-bottom` 属性设置为 `56.25%`，这是因为 `16:9` 宽高比的高度占宽度的 `56.25%`。内层容器 `.video-wrapper` 设置为绝对定位，并且宽高都设置为 `100%`，表示占据整个外层容器的空间。视频元素 `<video>` 的宽高也都设置为 `100%`，表示填充整个内层容器的空间。这样，无论在什么设备上播放，都能够自适应地保持 `16:9` 的宽高比。

用js旋转video并自适应宽高

可以使用HTML5中的`canvas`元素和`requestAnimationFrame`函数，以及`transform`属性来实现视频的旋转和自适应宽高。以下是一个示例代码：

<video id="video" src="your_video_url" autoplay loop></video>
<canvas id="canvas"></canvas>

<script>
  // 获取video和canvas元素
  const video = document.getElementById('video');
  const canvas = document.getElementById('canvas');

  // 获取canvas的上下文
  const ctx = canvas.getContext('2d');

  // 设置canvas的宽高和video的宽高一致
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  // 视频播放时每帧执行的函数
  function draw() {
    // 清空canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 保存canvas状态
    ctx.save();

    // 旋转canvas
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(Math.PI / 2); // 旋转90度
    ctx.translate(-canvas.height / 2, -canvas.width / 2);

    // 将视频绘制到canvas上
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // 恢复canvas状态
    ctx.restore();

    // 递归调用draw函数
    requestAnimationFrame(draw);
  }

  // 视频加载完成后开始播放
  video.addEventListener('loadedmetadata', function() {
    video.play();
    // 调用draw函数
    draw();
  });
</script>

上述代码中，首先获取video和canvas元素，然后设置canvas的宽高和video的宽高一致。在每一帧执行的`draw`函数中，先清空canvas，然后旋转canvas，将视频绘制到canvas上，最后恢复canvas状态。在视频加载完成后开始播放并调用`draw`函数。