video标签自适应屏幕翻转

要实现video标签自适应屏幕翻转，可以使用CSS3的@media查询和transform属性。具体步骤如下：

1.在CSS中为video标签设置样式，包括宽度、高度和位置等等。

2.使用@media查询，检测屏幕是否横屏或竖屏，设置不同的样式。

3.在@media查询中，使用transform属性将video标签旋转90度。

示例代码如下：

/* 设置video标签样式 */
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 竖屏时不旋转 */
@media screen and (orientation: portrait) {
  video {
    transform: none;
  }
}

/* 横屏时旋转90度 */
@media screen and (orientation: landscape) {
  video {
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh; /* 宽高互换 */
    height: 100vw;
    top: 100%; /* 调整位置 */
    right: 0;
  }
}

这样就可以实现video标签自适应屏幕翻转了。

相关问题

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