Я хочу показать видео HTML5 с содержимым поверх него. Как фоновое изображение. Все видео в формате Div / HTML5 должно иметь высоту 400 пикселей. Я не хочу использовать видео в качестве фона полной страницы, но на определенной высоте.
<div style="height: 400px">
<video controls poster="{{item.media_pic}}">
<source src="{{item.image_path}}" type="video/webm" />
<source src="{{item.image_path}}" type="video/mp4">
<source src="{{item.image_path}}" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<ion-row>
<ion-col col-4>
some text
</ion-col>
<ion-col col-8>
button
</ion-col>
</ion-row>
</div>
Используйте приведенный ниже код:
<div style="height: 400px;position:relative;background:#000">
<video controls poster="{{item.media_pic}}" style="position:absolute;height:100%;">
<source src="{{item.image_path}}" type="video/webm" />
<source src="http://www.papytane.com/mp4/accrobra.mp4" type="video/mp4">
<source src="{{item.image_path}}" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<ion-row style="position:relative;z-index:9">
<ion-col col-4>
some text
</ion-col>
<ion-col col-8>
button
</ion-col>
</ion-row>
</div>
Добавьте «position: absolute» к тегу видео и добавьте 100% высоты, чтобы соответствовать высоте родительского div.
Добавьте «position: relative» к родительскому div тега видео, чтобы удерживать видео внутри, поскольку мы применили к нему абсолютную позицию.
Эта статья взята из Интернета, укажите источник при перепечатке.
Если есть какие-либо нарушения, пожалуйста, свяжитесь с[email protected] Удалить.
я говорю два предложения