vue2 video标签如何自适应屏幕大小

Vue2中的video标签可以通过CSS样式来实现自适应屏幕大小的效果。你可以使用以下样式来实现：

<style>
.divVideo {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 40%; /* 根据需要调整比例 */
}

video {
  position: absolute;
  left: 1%;
  top: 0;
  width: 98%;
  height: 100%; /* 设置高度为100%以填充父容器 */
  object-fit: fill; /* 根据需要调整填充方式 */
}
</style>

<div class="divVideo">
  <video id="video" controls>
    <source src="./video/01.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

这段代码中，我们给包裹video标签的div设置了一个固定的宽度和高度比例，然后将video标签的宽度设置为父容器的98%，高度设置为100%以填充父容器。通过设置object-fit属性，可以调整视频在容器中的填充方式，例如fill、contain、cover等。

相关问题

vue-video-player 安卓铺满屏幕

要在Vue项目中使用vue-video-player插件实现视频在安卓设备上铺满屏幕，可以按照以下步骤进行操作：

1. 首先，在Vue项目中安装vue-video-player插件。可以使用npm或yarn命令来安装该插件，例如：

npm install vue-video-player

2. 在项目的入口文件(main.js)中引入vue-video-player插件，并注册为全局组件。可以使用以下代码：

import Vue from 'vue'
import VideoPlayer from 'vue-video-player'

Vue.use(VideoPlayer)

3. 在需要使用视频播放器的组件中，使用vue-video-player组件并传入视频的源文件链接。可以使用以下代码：

<template>
  <div>
    <video-player :options="playerOptions"></video-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        src: 'your_video_src',
        autoplay: true,
        muted: true,
        fluid: true,
        aspectRatio: '16:9'
      }
    }
  }
}
</script>

4. 根据需要，可以在playerOptions对象中设置其他参数，以满足特定的需求。例如，设置autoplay属性为true可以在加载时自动播放视频，设置muted属性为true可以静音播放视频，设置fluid属性为true可以使视频在容器内自适应宽高等。

通过以上步骤，你可以在Vue项目中使用vue-video-player插件实现视频在安卓设备上铺满屏幕。请确保你已经按照文档正确配置和使用该插件。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue video和vue-video-player实现视频铺满教程](https://blog.csdn.net/weixin_32770297/article/details/111886661)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

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` 的宽高比。