用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`函数。