移动端怎么用视频做背景

helloworld
  • 9

在pc端网页的登入界面能够正常显示,同时显示视频背景和登入框架。
可是如果在移动端中只能单独播放视频,想删掉也不行。
怎么解决

<v-container fluid bg fill-height grid-list-md text-xs-center>
    <video muted="muted" autoplay="autoplay" width="100%" loop style="position: fixed;right: 0px;bottom: 0px;min-width: 100%;min-height: 100%;">
      <source src="../../assets/videoplayback.mp4" type="video/mp4" />
    </video>
    <v-row class="h-100 w-100">
      <v-col class="d-flex justify-center align-center">
        <LoginCard
          :user="user"
          :text="text"
          @click="onsubmit"
        />
      </v-col>
    </v-row>
回复
阅读 449
2 个回答

@media 单独处理一下呗。看上去你也没用响应式布局。

视频做背景没问题的,但移动端需要做特殊处理,因为移动端视频播放的时候层级很高,试着给video标签加上这些属性(不是都用,你自己组合一下),看能否达到你要的效果

webkit-playsinline="true" IOS下防止全屏播放
playsinline="true" 同上
x-webkit-airplay="true" 支持ios的AirPlay功能
x5-video-player-type="h5" 启用同层H5播放器
x5-video-player-fullscreen="true" 全屏设置
x5-video-orientation="portraint" 竖屏
style="object-fit:fill" 封面铺满
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏