我想要一个HTML视频标签来填充我的卡。 像这样:

<ion-card>
  <ion-card-header>
    <ion-card-title>Ion Videp</ion-card-title>
  </ion-card-header>
    <div class="video-wrapper">
      <video #video controls="controls" class="video" autoplay="autoplay">
        <source src="../../../assets/push-ups.mp4" type="video/mp4" />
      </video>
    </div>
</ion-card>

但是视频只是保持原始大小。

我尝试了以下CSS样式:

.video-wrapper {
    position: relative;
    height: 200px;
}

.video {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

但这仍然行不通。

有任何想法吗?

#1楼 票数:0

.video {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100vw; /* you can changes size*/
    min-height: 100vh;
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

  ask by Jonas translate from so

未解决问题?本站智能推荐:

1回复

Ionic 无法在 iOS 上静音 html5 视频

我试图在 Ionic 1.3 / iOS 10 上将 html5 视频静音,但到目前为止视频仍然以等于 1 的音量播放。这是我的 HTML 我知道 muted 属性在 iOS 10 上不起作用这就是为什么我使用 JS 将音量设置为 cero 但在 iOS 上仍然不起作用认为它在浏览器中起作用
2回复

在绝对定位父级中滚动Div

我试图允许我的HTML中的内部div允许滚动。 我不确定是什么阻止了滚动。 这是我的HTML: 这是我的CSS: 注意:过去,我给类.item.item-text-wrap设置了一个高度值,尽管这再次没有奏效。 任何和所有帮助将不胜感激!
1回复

我怎样才能让我的 html5 视频随着范围滑块值的变化而开始

我正在构建一个带有范围滑块的 html5 视频,我想如果我应该移动滑块,视频应该根据范围滑块的值自动启动和停止,我已经这样做了,但是在视频开始之前需要很长时间,我怎样才能让视频在范围滑块的值改变时立即开始 这是我的代码 test.page.html 这是我的代码 test.page.ts 请
1回复

播放设备音频时视频无法播放,反之亦然

因此,当我的视频加载并开始播放时,来自设备的音频(ipod,spotify)将停止播放。 如果我强制播放音频(通过切换到iPod并按播放并梳理回我的应用程序),视频将被冻结。 我还直接在应用程序中测试了一个音频文件,并且在播放视频时效果非常好。 音频在整个应用程序中运行,我将其放在与视频相
1回复

根据上一个视图中选择的列表项动态填充HTML模板

我有一个页面:/ tracks是一个项目列表,每个项目都带有ngclick和href项目。 href根据从ngclick中的函数传递的值链接到特定项目的视图。 href视图应自动填充,但不起作用。 相关代码: 轨道视图(已附加轨道控制器): 轨迹视图(已附加轨迹控制器):
1回复

打开的页面cordova iOS无法使用HTML内容

我正在尝试在我的cordova应用程序中打开一个单独的窗口,其中包含HTML内容,而不包含链接。 它不适用于iOS设备,当我在浏览器中运行它时可以使用。 我的代码是这样的: 我运行它时,似乎正在打开具有透明背景的页面。 任何想法?
1回复

离子,home.html无法识别

您好,我是ionic(ionic 4.1.1)的新手,但是我仍然没有找到将javascript实现到home.html中的方法,例如: 等待中... ` 我也尝试过在没有所有离子含量和离子标头等的情况下进行此操作...但是没有任何效果,所以...有人遇到相同的错误/问题吗
3回复

HTML无法加载数组/未被捕获(承诺)

我使用woocommerce api从ionic3的父类别中加载新页面上的子类别。 我确实可以获取子类别,但是我的问题是,当我尝试显示子类别时,出现如下屏幕所示的错误: 这是我的sub.ts文件代码: 而我的sub.HTML文件代码是: 当我选择父类别来显示子类别时